添加授权标头时出现CORS错误答案

【问题标题】：CORS Error When adding Authorization header添加授权标头时出现CORS错误
【发布时间】：2021-02-21 18:00:02
【问题描述】：

我正在构建一个调用 .Net Core webapi 的 Angular 应用程序。我已经能够将其设置为能够成功回调并使用 CORS 获得响应。但是当我将 Authorization 标头添加到 Angular 拦截器时，它会引发以下错误。

错误从源“http://localhost:4200”访问“http://localhost:57120/api/values”的 XMLHttpRequest 已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：没有“访问” -Control-Allow-Origin' 标头存在于请求的资源上。

C# 启动 - 配置方法

app.UseCors(
            options =>
            {
                options.WithOrigins("http://localhost:4200");
                options.WithHeaders("Access-Control-Allow-Credentials: true"); 
                options.AllowCredentials();
            }
        );

Angular HttpInterceptor

const token =  localStorage.getItem('access-token');
    
const clone = request.clone({
      headers: request.headers.set("Authorization", "Bearer " + token),
      withCredentials: true,
      
});

return next.handle(clone);

【问题讨论】：

你能验证邮件头是否在邮递员中返回吗？请注意，如果您的代码在标头之前中断，那么您将收到 cors 错误而不是 http 错误
我从未使用过 Postman。我可以试着弄清楚。
所以这是一个踢球者，我的工作阻碍了邮递员。但据我所知，似乎没有抛出任何错误。它可以在没有添加授权标头的行的情况下工作，并且在我添加它时不会。
对您的中间件订单进行完整性检查：您的 CORS 中间件是否在您的授权中间件之前（应该是）？

标签： angular asp.net-core cors authorization-header

【解决方案1】：

您的启动配置错误。尝试使用命名的 cors 策略并将您的 app.UserCors 更改为另一种语法：

  app.UseCors("CorsPolicy") 

services.AddCors(opt =>  opt.AddPolicy("CorsPolicy", c =>
            { 
                c.AllowAnyOrigin()
                   .AllowAnyHeader()
                    .AllowCredentials()
                    .AllowAnyMethod();
            }));

如果可行，您可以将 c.AllowAnyOrigin() 替换为 options.WithOrigins("http://localhost:4200");

【讨论】：

我仍然使用 app.UseCors() 方法，但包含与您相同的选项。我给了你答案，因为它有效。再次感谢您。