角度被 CORS 策略预检响应阻止 [重复]答案

【问题标题】：Angular blocked by CORS policy preflight response [duplicate]角度被 CORS 策略预检响应阻止 [重复]
【发布时间】：2021-09-05 22:58:04
【问题描述】：

我在 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));
  }

【问题讨论】：

标签： angular cors token angular12

【解决方案1】：

虽然读起来很长，但我强烈建议您阅读CORS page on MDN，简而言之：

当您触发从 JavaScript 到页面本身的另一个 origin 的请求时，服务器需要使用适当的 HTTP 标头 - 即 Access-Control-Allow-Headers - 响应 由浏览器发出的预检请求，因此浏览器安全性不会阻止该请求。

对于重复问题的更长答案see this one。

【讨论】：

【解决方案2】：

代码在 Postman 中有效的原因是 Postman 不会发送预检请求，而您的浏览器会发送。

您可以将其添加到后端服务器：

'Access-Control-Allow-Headers', '*'

或者您可以使用代理here。请记住，代理只能在开发中使用 - ng serve - 在生产中不起作用。

【讨论】：

【解决方案3】：

这很不言自明：您的 API 服务器需要使用名为 Access-Control-Allow-Headers 的标头响应预检请求 (OPTIONS)，其中包含 Authorization 标头。

【讨论】：