CORS Issue with Angular MSAL Azure AD Dotnet Core Web API

Question

I have been working through this tutorial:

https://github.com/Azure-Samples/ms-identity-javascript-angular-spa-aspnetcore-webapi

The Authentication works fine.

However, I get a CORS exception in the console:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://localhost:44351/api/todolist/. (Reason: CORS request did not succeed).

In startup.cs I changed:

// builder.AllowAnyOrigin() // .AllowAnyMethod() // .AllowAnyHeader();

to:

builder.WithOrigins("http://localhost:4200") .AllowAnyMethod() .AllowAnyHeader() .AllowCredentials();

This had no effect.

Can anyone help me to resolve please?

Here is the startup.cs

public class Startup
{
    public Startup(IConfiguration configuration)
    {
        Configuration = configuration;
    }

    public IConfiguration Configuration { get; }

    public void ConfigureServices(IServiceCollection services)
    {
        services.AddAuthentication(JwtBearerDefaults.AuthenticationScheme)
            .AddProtectedWebApi(Configuration);

        // Creating policies that wraps the authorization requirements
        services.AddAuthorization();

        services.AddDbContext<TodoContext>(opt => opt.UseInMemoryDatabase("TodoList"));

        services.AddControllers();

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

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

        app.UseCors("default");
        app.UseHttpsRedirection();
        app.UseRouting();
        app.UseAuthentication();
        app.UseAuthorization();
        app.UseEndpoints(endpoints =>
        {
            endpoints.MapControllers();
        });
    }
}

In newer versions of Chrome, you might see an CORS error in the developer console when actually there was an Internal Server Error in the backend. Check for exceptions in the logs there. — Alex AIT

Jason Pan Jason Pan · Accepted Answer · 2020-05-25T08:47:19

I have tried all the methods you tried, as well as other methods, and encountered the same problem in this project. More details can be found in the official documentation. According to the instructions in the official documentation, the cross-domain solutions you tried before are all achievable, and I think the problem may appear in this sample project. If you re-create the demo, there will be no such problems. https://docs.microsoft.com/en-us/aspnet/core/security/cors?view=aspnetcore-3.1

In the end, the suggestion I gave was to set up CORS on the portal, and I personally tested it to solve this problem.

In addition, if you need to trace the root of the problem, it is recommended to use the packet capture method for analysis, check the request header of the two websites, you can refer to the document .

CORS Issue with Angular MSAL Azure AD Dotnet Core Web API

2 Answers