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

【问题标题】：CORS Issue with Angular MSAL Azure AD Dotnet Core Web APIAngular MSAL Azure AD Dotnet Core Web API 的 CORS 问题
【发布时间】：2020-09-10 14:59:09
【问题描述】：

我一直在学习本教程：

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

【问题讨论】：

你能在你的核心 api 中分享关于 cors 的完整代码吗？
在较新版本的 Chrome 中，当后端实际上存在内部服务器错误时，您可能会在开发者控制台中看到 CORS 错误。检查那里的日志中的异常。
我已将 startup.cs 添加到问题中（如上）。

标签： .net angular azure-active-directory msal

【解决方案1】：

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

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

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

【讨论】：

【解决方案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 问题。

【讨论】：