NET5.0 Blazor WASM CORS client exception

Question

I have a Blazor WASM app and a Web Api to get called by Blzor via HttpClient. Both programs run on the same machine (and also in production environment which should not be to exotic for a small business application!).

Calling the Web Api from the Blazor client result in a client CORS exception

Access to fetch at 'http://localhost:4040/' from origin 'https://localhost:5001' 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.

which is the expected behavior for this case.

In an former api project I developed in PHP, that had the same client behavior, I can bypass the CORS exception by simply setting the response header e.g.

$response = new Response;
$response->setState(false, $route->command);
...
header("Access-Control-Allow-Origin: *");
echo $response;

Now I want this in my .net 5.0 Web Api. I found different docs in the internet to cope with that like in

https://learn.microsoft.com/de-de/aspnet/core/security/cors?view=aspnetcore-5.0 https://www.c-sharpcorner.com/article/enabling-cors-in-asp-net-core-api-application/ https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.cors.infrastructure.corspolicybuilder.withorigins?view=aspnetcore-5.0

and implemented it in my api

    public class Startup {
        //---------------------------------------------------------------------

        public Startup(IConfiguration configuration)
        {
            Configuration = configuration;
        }
        //---------------------------------------------------------------------

        public IConfiguration Configuration { get; }

        //---------------------------------------------------------------------

        // This method gets called by the runtime. Use this method to add services to the container.
        public void ConfigureServices
                    (
                        IServiceCollection services
                    )
                    =>  services
                        .AddCors()
                        .AddSwaggerGen(c => c.SwaggerDoc("v1", new OpenApiInfo { Title = "api", Version = "v1"}) )
                        .AddControllers()
                        ;
        //---------------------------------------------------------------------

        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        public void Configure
                    (
                        IApplicationBuilder app,
                        IWebHostEnvironment env
                    )
                    =>  app.
                        apply( _ =>
                        {
                            if (true) //(env.IsDevelopment())
                            {
                                app
                                .UseDeveloperExceptionPage()
                                .UseSwagger()
                                .UseSwaggerUI( c => c.SwaggerEndpoint("/swagger/v1/swagger.json", "api v1") );
                            }
                        })
                        .UseCors( cors =>
                            cors
                            .AllowAnyHeader()
                            .AllowAnyMethod()
                            .SetIsOriginAllowed( _ => true )
                            .AllowCredentials()
                        )
                        .UseHttpsRedirection()
                        .UseRouting()
                        .UseAuthorization()
                        .UseEndpoints( e => e.MapControllers() )
                        ;
        //---------------------------------------------------------------------
    }

Even tried to set the Response Header in the ApiController

    [Route("/")]
    [ApiController]
    public sealed class ServertimeController : ControllerBase
    {
        //[EnableCors("AllowOrigin")]
        [HttpGet]
        public Servertime Get() {

            Response.Headers.Add("Access-Control-Allow-Origin", "*");
            Response.Headers.Add("Access-Control-Allow-Methods", "GET, POST, PUT");

            return servertime();
        }
    }

The Blazor WASM client looks like

    private async void onClick()
    {

        var response = await httpClient.GetFromJsonAsync<Servertime> ("http://localhost:4040");
        message = response.servertime;
        this.StateHasChanged();
    }

But it still results in the client CORS exception. To bypass this for development I use the browser extension “CORS Unblock”, but this is not an option for deployment.

What would be the correct approach to avoid Blazor client exception, what do I miss?

Answer 1

@Dmitriy Grebennikov answer is also valid but it needs a little bit improvements to make this more secure.

in ConfigureServices of Startup.cs add the following code before services.AddControllers();

services.AddCors(options =>
            {
                options.AddDefaultPolicy(builder => 
                builder.WithOrigins("https://localhost:44338")
                       .AllowAnyMethod()
                       .AllowAnyHeader());
            }); 

Make sure that your url should not end with /.

---

You can pass many url to WithOrigins method. finally in the Configure method of Startup.cs add the following line before app.UseAuthorization(); and after app.UseRouting();

app.UseCors();

The code should be working now.

Answer 2

Just add this to ConfigureServices method:

services.AddCors(options =>
        {
            options.AddPolicy("DevCorsPolicy", builder =>
            {
                builder
                    .AllowAnyOrigin()
                    .AllowAnyMethod()
                    .AllowAnyHeader();
            });
        });

And this to Configure method:

app.UseCors("DevCorsPolicy");

Answer 3

For a solution in Blazor WASM, NOT on Serverside, this code snippet

Microsoft.AspNetCore.Components.WebAssembly.Http.WebAssemblyHttpRequestMessageExtensions.SetBrowserRequestMode(
    httpRequestMessage, 
    Microsoft.AspNetCore.Components.WebAssembly.Http.BrowserRequestMode.NoCors
);

will tell the local browser, which runs the local PWA, to not send CORS with the Request.

Code-Example (with call and used namespaces)

HttpRequestMessage httpRequestMessage = new HttpRequestMessage{
    RequestUri = new Uri("[Adress]"),
    Content = new StringContent(),
    Method = HttpMethod.Post };

WebAssemblyHttpRequestMessageExtensions.SetBrowserRequestMode(httpRequestMessage, BrowserRequestMode.NoCors);

HttpResponseMessage response = client.SendAsync(httpRequestMessage).Result;

--> the Version from "Dmitry Grebennikov" works. In my version, the Post isn`t async and the PWA throw an error.

Answer 4

var client = new HttpClient();

var request = new HttpRequestMessage
{
    Method = new HttpMethod("GET"),
    RequestUri = new Uri($"{site.BaseUrl}robots.txt")
};

request.Headers.Add("Accept", "text/plain");
request.SetBrowserRequestMode(BrowserRequestMode.NoCors);

var response = await client.SendAsync(request);

var txt = await response.Content.ReadAsStringAsync();

References

• SetBrowserRequestMode
• BrowserRequestMode

Answer 5

The answer from Dmitry Grebennikov does not fully work for me in a .NET 7 standalone WebAssembly project, but it was part of the solution.

var request = new HttpRequestMessage(method, uri);

We need to first set:

Microsoft.AspNetCore.Components.WebAssembly.Http.WebAssemblyHttpRequest
MessageExtensions.SetBrowserRequestMode(request, Microsoft.AspNetCore.Components.WebAssembly.Http.BrowserRequestMode.NoCors);

Now we need to add a CORS allow header:

request.Headers.Add("Access-Control-Allow-Origin","*");
request.Headers.Add("Access-Control-Allow-Headers","Origin, X-Requested-With, Content-Type, Accept");

Now I got CORS working with HttpClient. :)

Standalone Blazor WebAssembly does not support .AddCors and it will not work, according to Microsoft answers on this question.

Answer 6

After much hair pulled out what helped me was to call the server (localhost at development time) on http instead of https and I needed to add Access-Control-Request-Headers to the RequestHeader with value content-type. The server side was configured properly, but I still got a CORS error.

This is my method:

public async Task<T?> Post<T>(object? data)
    var client = new HttpClient()
    {
        BaseAddress = new Uri("http://localhost/MyApi/api/postData")
    };

    var requestContent = new StringContent(
        JsonConvert.SerializeObject(data),
        UTF8Encoding.UTF8,
        new MediaTypeHeaderValue("application/json"));

    var httpRequestMessage = new HttpRequestMessage
    {
        RequestUri = new Uri($"{client.BaseAddress}"),
        Content = requestContent,
        Method = HttpMethod.Post,
        Headers =
        {
            {"accept", "application/json"},
            {"Access-Control-Request-Headers", "content-type"}
        }
    };

    var result = await client.SendAsync(httpRequestMessage);
    
    if (!result.IsSuccessStatusCode)
        return default;

    T? content = default;
    try
    {
        content = await result.Content.ReadFromJsonAsync<T>();
    }
    catch (Exception ex)
    {

    }

    return content;
}

Answer 7

You could make the solution proposed by @Abdul Qayyum production ready using environment configuration to get the list of sites allowed to access the API.

I already used the following code in an existing product:

var corsAllowedOrigins = builder.Configuration["Cors:AllowedOrigins"];
if (!string.IsNullOrEmpty(corsAllowedOrigins)) {
    var origins = corsAllowedOrigins.Split(',', ';');
    Log.Information("Setting Cors Origins: {orgins}", (object)origins);
    builder.Services.AddCors(options => {
        options.AddPolicy("CorsPolicy", builder => {
            builder.WithOrigins(origins)
                .AllowCredentials()
                .AllowAnyMethod()
                .AllowAnyHeader();
        });
    });        
} else {
    Log.Warning("Cors policy not specified, client can't connect to API");
    // or add a default policy
}

// ... and then ...
var app = builder.Build();
app.UseCors("CorsPolicy");

With this code you could use appsettings.json or Cors__AllowedOrigins environment variable (this works with docker).

Answer 8

Interestingly enough I had a similar problem my CORS setup in my Program.cs seemed fine but the actual problem was the app.UseHttpsRedirection() middleware. If your client app is running on HTTP instead of HTTPS this middleware will break CORS behavior.

Reference: HTTP redirection to HTTPS causes ERR_INVALID_REDIRECT on the CORS preflight request.

The solution would be to remove the middleware if it is not really needed and Microsoft docs recommend: API projects can reject HTTP requests rather than use UseHttpsRedirection to redirect requests to HTTPS.

I hope this helps someone.