How to Fix No ‘Access-Control-Allow-Origin’ .NET API CORS

Jacques Hunt — Wed, 14 Jun 2023 08:15:55 +0000

In this article, I will discuss about the error message that you might found when calling a CORS protected .NET Core Api. The following is the full error message:

Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header
is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access. 
The response had HTTP status code 405.

How to Fix Error No ‘Access-Control-Allow-Origin’

1. Allow Method “Options”

A preflight request is one that the browser sends to see if the CORS settings have been correctly implemented.

Therefore, if your endpoint supports POST, PUT, or DELETE operations and the browser sends a “application/json” request, the browser sends two requests: the “OPTIONS” request first, then a POST, PUT, or DELETE request.

You must therefore enable OPTIONS: in your application’s CORS settings.

app.UseCors(builder =>
{
  builder
     .WithOrigins("http://localhost:4200", "https://localhost:4200")
     .SetIsOriginAllowedToAllowWildcardSubdomains()
     .AllowAnyHeader()
     .AllowCredentials()
     .WithMethods("GET", "PUT", "POST", "DELETE", "OPTIONS")
     .SetPreflightMaxAge(TimeSpan.FromSeconds(3600));
}
);

2. Cors is Defined Twice in Your Code

Check that you have defined CORS twice.

First add CORS to the WebApplicationBuilder Services:

var builder = WebApplication.CreateBuilder();
...
...
builder.Services.AddCors();

Then when defining the app:

var app = builder.Build();
app.UseCors(builder =>
      {
        builder
              .WithOrigins("http://localhost:4200", "https://localhost:4200")
              .SetIsOriginAllowedToAllowWildcardSubdomains()
              .AllowAnyHeader()
              .AllowCredentials()
              .WithMethods("GET", "PUT", "POST", "DELETE", "OPTIONS")
              .SetPreflightMaxAge(TimeSpan.FromSeconds(3600));
 
      }
);

3. Check the Sequence of Calls

You must define CORS before you map controllers, define routes etc.

var app = builder.Build();
 
// The first thing in the chain of calls is to define the CORS
app.UseCors(builder =>
      {
        builder
              .WithOrigins("http://localhost:4200", "https://localhost:4200")
              .SetIsOriginAllowedToAllowWildcardSubdomains()
              .AllowAnyHeader()
              .AllowCredentials()
              .WithMethods("GET", "PUT", "POST", "DELETE", "OPTIONS")
              .SetPreflightMaxAge(TimeSpan.FromSeconds(3600));
 
      }
);
 
...
...
 
// After that, I can do mapping, routing, redirection etc...
app.MapControllers();
app.UseRouting();
app.UseHttpsRedirection();
 
if (app.Environment.IsProduction())
{
  app.UseTokenAuthentication();
}
 
app.Run();

4. Your Load Balancer Must Allow “Options” as well

In front of your API, do you have a load balancer? Verify that OPTIONS methods are also supported by the load balancer.