Trouble with CORS Policy and .NET Core 3.1

Question

I\'m not sure what I\'m missing, but can\'t seem to get my CORS Policy working with .NET Core 3.1 and Angular 8 client-side.

Startup.cs:

Answer 1

When adding the Cors Service make sure to include .SetIsOriginAllowed((host) => true) after .WithOrigins("http://localhost:4200")

services.AddCors(options => {
            options.AddPolicy("mypolicy",builder => builder
            .WithOrigins("http://localhost:4200/")
            .SetIsOriginAllowed((host) => true)
            .AllowAnyMethod()
            .AllowAnyHeader());
  });

Answer 2

I resolved my issue by adding EnableCors to my controller

[EnableCors("MyPolicy")]
[Route("api/[controller]")]
[ApiController]
public class ValuesController : ControllerBase

Answer 3

There might be several issues causing CORS error. Make sure to configure CORS properly first. You can configure it in the below way:

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

Then in Configure() of Startup.cs file, the following should be the order of middlewares:

    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {

        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
        }


        // Enable middleware to serve generated Swagger as a JSON endpoint.
        app.UseSwagger();

        // Enable middleware to serve swagger-ui (HTML, JS, CSS, etc.),
        // specifying the Swagger JSON endpoint.
        app.UseSwaggerUI(c =>
        {
            c.SwaggerEndpoint("../swagger/v1/swagger.json", "API");
        });

        app.UseHttpsRedirection();

        app.UseRouting();

        app.UseCors("CorsPolicy");

        app.UseAuthentication();

        app.UseAuthorization();

        app.UseEndpoints(endpoints =>
        {
            endpoints.MapControllers();
        });
    }

If you have configured the .NET core application to run on HTTPs URL, then make sure to invoke the https URL of the application for API request from Angular as well.

If you are invoking HTTP URL from the Angular and running .NET core application on HTTPs, then remove the app.UseHttpsRedirection() middleware.

To use app.UseHttpsRedirection(), either run .NET core on HTTPs URL and make HTTPs requests from the angular or run .NET core on HTTP URL and make HTTP requests from the angular (in this case, the .NET application must only run on HTTP. It shouldn't be configured to run on both HTTP and HTTPs).

The above things will most probably solve your problem.

Answer 4

I faced the same issue and I just found out that custom middlewares must go after the useCors()

        app.UseHttpsRedirection();

        app.UseAuthentication();

        app.UsePathBase("/api");

        app.UseRouting();

        app.UseCors("AllowSpecificOrigins");

        app.UseMiddleware<CountryMiddleware>();

        app.UseAuthorization();

        app.UseEndpoints(endpoints =>
        {
            endpoints.MapControllers();
        });

Answer 5

In my situation it was related to the Content-Type of the header being application/json.

Only those Content-Type headers are allowed with CORS:

application/x-www-form-urlencoded

multipart/form-data

text/plain

Answer 6

first app.UseRouting(); then app.UseCors("foo");

Change your Configure method like the following :

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }

    app.UseHttpsRedirection();



    app.UseRouting();  // first
    // Use the CORS policy
    app.UseCors("foo"); // second

    app.UseAuthorization();

    app.UseEndpoints(endpoints =>
    {
        endpoints.MapControllers();
    });
}

It worked for me !