Angular MSAL Azure AD Dotnet Core Web API 的 CORS 问题

Question

我一直在学习本教程：

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

身份验证工作正常。

但是，我在控制台中收到 CORS 异常：

跨源请求被阻止：同源策略不允许读取位于 https://localhost:44351/api/todolist/ 的远程资源。（原因：CORS请求没有成功）。

在startup.cs我改了：

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

至：

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

这没有效果。

谁能帮我解决一下？

这是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();
        });
    }
}

Answer 1

你试过的方法我都试过了，其他的方法也都试过了，在这个项目中也遇到了同样的问题。可以在官方文档中找到更多详细信息。根据官方文档中的说明，您之前尝试过的跨域解决方案都是可以实现的，我认为问题可能出现在这个示例项目中。如果重新制作demo，就不会有这样的问题。 https://docs.microsoft.com/en-us/aspnet/core/security/cors?view=aspnetcore-3.1

最后我给的建议是在传送门设置CORS，我亲自测试解决了这个问题。

另外，如果需要追根溯源，建议使用抓包的方式进行分析，查看两个网站的请求头，可以参考the document。

Answer 2

解决代码示例的 CORS 问题：

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

我对 Startup.cs 进行了以下更改：

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

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

这为我解决了 CORS 问题。

Answer 3

.Net核心框架6.0

在Program.cs文件中

在应用程序构建调用之前添加以下代码示例var app = builder.Build();

builder.Services.AddCors(options =>
{
    options.AddPolicy("angular-app", builder =>
    {
        builder.WithOrigins("http://localhost:4200");
    });
});

通过在 .WithOrigins("http://localhost:4200") 前面加上以下

允许任何方法，headers 和凭据

.AllowAnyMedthod()
.AllowAnyHeader()
.AllowCredentials()

应用程序构建调用后，在检查应用程序环境是否处于开发模式的 if 语句后添加以下行

app.UseCors("angular-app");

Angular MSAL Azure AD Dotnet Core Web API 的 CORS 问题

CORS Issue with Angular MSAL Azure AD Dotnet Core Web API

.net

azure-active-directory

msal

angular