如何解决CORS 政策预检响应阻止了 Angular
我在 Angular 12 中发出请求,在标头中有一个有效的令牌,在邮递员中它可以工作,但是,如果我从浏览器运行它,我会收到以下错误,from origin 'http://localhost:4200' has been blocked by CORS policy: Request header field authorization is not allowed by Access-Control-Allow-Headers in preflight response.
这是核心的一部分,它在服务中。
token: string = 'eyJ4NXQiOiJNek15Wm1aaE9ERm...';
headers= new HttpHeaders()
.set('Content-type','application/json')
.set('Access-Control-Allow-Methods','GET,PUT,POST,DELETE,PATCH,OPTIONS')
.set('Authorization','Bearer '+ this.token);
getUniversal4(): Observable<Catalog>{
console.log(this.headers);
return this.http.get<Catalog>(this.urlEndpointBS,{headers: this.headers});
//return this.http.get(this.urlEndpoint).pipe( map( response => response));
}
解决方法
这是不言自明的:您的 API 服务器需要使用包含 Access-Control-Allow-Headers
标头的名为 Authorization
的标头响应预检请求 (OPTIONS)。
代码在 Postman 中工作的原因是 Postman 不会发送预检请求,而您的浏览器会。
您可以将其添加到后端服务器:
'Access-Control-Allow-Headers','*'
或者您可以使用代理 here。请记住,代理只能在开发中使用 - ng serve - 而不能在生产中使用。
,虽然阅读很长,但我强烈建议阅读CORS page on MDN,简而言之:
当您从 JavaScript 触发对页面本身以外的源 的请求时,服务器需要使用适当的 HTTP 标头(即 Access-Control-Allow-Headers
)响应 em>浏览器发出的预检请求,因此浏览器安全性不会阻止该请求。
关于重复问题的更长答案see this one。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。