Aspnetcore: Client side Blazor: UseCors not supported by IComponentsApplicationBuilder

[NCC1701M]

There is no support for UseCors in client side blazor apps.

I'v created a client side blazor app but I can't get CORS running. IComponentsApplicationBuilder does not support an UseCors extension method.

using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Components.Builder;
using Microsoft.Extensions.DependencyInjection;

namespace TestApp
{
  public class Startup
  {
    public void ConfigureServices(IServiceCollection services)
    {
      services.AddLogging();
      services.AddCors(options =>
      {
        options.AddDefaultPolicy(builder =>
        {
          builder.WithOrigins("http://adifferentserver:8080");
        });
      });
    }

    public void Configure(IComponentsApplicationBuilder app)
    {
      app.UseCors();  // <-- Error
      app.AddComponent<App>("app");
    }
  }
}

[danroth27]

Hi @NCC1701M,

Enabling CORS is a server concern, not a client-side concern, so it needs to be done in the Startup class in the server project. Instead of calling UseCors in your client project, you should add it to the Startup class in the server project when using the "Blazor (ASP.NET Core hosted)" template.

[kaki104]

Hi @danroth27

If I call the Azure function from the Blazor client-side app, an error occurs.

Access to fetch at 'http://webrecording.azurewebsites.net/api/RecordMasterEntities?userid=admin&code=PTXZS0NGYzqYjyNUNWFJrPLEnkAQU6iE==' from origin 'http://localhost:2399' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Q1. Do I have to add CORS to fix this?
By the way, if I look at the comments, it looks like Blazor client-side app can not use CORS.

Q2. If I want to use CORS, do I create and use it as a Blazor (ASP.NET Core hosted) project template?

[danroth27]

Hi @kaki104,

If you want to make a cross origin request from a Blazor WebAssembly App, then, yes, the endpoint you are calling does need to support CORS. To enable CORS for an Azure Function see https://docs.microsoft.com/azure/azure-functions/functions-how-to-use-azure-function-app-settings#cors. For more details on making HTTP requests from a Blazor app see https://docs.microsoft.com/aspnet/core/blazor/call-web-api