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

问题描述

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

错误 从CORS策略阻止从源“ http：// localhost：4200”访问“ http：// localhost：57120 / api / values”处的XMLHttpRequest：对预检请求的响应未通过访问控制检查：否“访问” -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策略并更改您的应用。UserCors使用非注释语法：

  app.UseCors("CorsPolicy") 

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

如果可行，则可以用options.WithOrigins（“ http：// localhost：4200”）;

替换c.AllowAnyOrigin（）。