Angular调用带JWT认证的.NET Core API出现CORS跨域错误如何解决？

问题修复方案 #

1. 调整.NET Core 中间件顺序 #

你当前遇到问题的核心原因是Configure方法中CORS中间件的执行顺序错误。浏览器发送带认证信息的跨域请求前会先发送无认证信息的OPTIONS预检请求，你把CORS中间件放在授权、身份校验中间件之后，预检请求会被授权逻辑直接拦截返回401，没有机会注入CORS响应头，所以浏览器报跨域错误。
修改Configure方法的中间件顺序，将UseCors移到UseAuthentication、UseAuthorization之前：

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
//.....
    app.UseRouting();
    // CORS中间件必须放在身份验证、授权中间件之前
    app.UseCors("ApiCorsPolicy");
    app.UseSession();
    app.UseAuthentication();
    app.UseAuthorization();
    app.UseHttpsRedirection();

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

2. 可选补充配置 #

如果调整顺序后仍有问题，可以在CORS策略配置中显式设置预检请求缓存，减少重复预检请求：

services.AddCors(options => options.AddPolicy("ApiCorsPolicy", builder =>
{
    builder.WithOrigins("http://localhost:4200")
           .AllowAnyMethod()
           .AllowAnyHeader()
           .AllowCredentials()
           .SetPreflightMaxAge(TimeSpan.FromMinutes(10));
}));

3. Angular端校验 #

确认angular2-jwt的配置中，发送请求时withCredentials属性为true，和服务端的AllowCredentials配置对应。
调整完顺序后重启服务端即可解决加[Authorize]后跨域失败的问题。

内容的提问来源于stack exchange，提问作者Merna Mustafa