添加授权标头时出现CORS错误
Posted
技术标签:
【中文标题】添加授权标头时出现CORS错误【英文标题】:CORS Error When adding Authorization header 【发布时间】: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 中间件是否在您的授权中间件之前(应该是)? 【参考方案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() 方法,但包含与您相同的选项。我给了你答案,因为它有效。再次感谢您。以上是关于添加授权标头时出现CORS错误的主要内容,如果未能解决你的问题,请参考以下文章
将 no-cors 包含在标头中以获取 react.js 中的 json 内容时出现奇怪的错误
将 fetch 与 Content-Type 一起使用时出现 CORS 错误 [重复]
使用 Cloud Functions for Firebase 时出现 CORS 错误