-1

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

3 回答 3

2

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

于 2021-06-22T10:41:57.323 回答
1

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

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

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

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

于 2021-06-22T10:44:35.943 回答
0

虽然读起来很长，但我强烈建议您浏览MDN 上的 CORS 页面，简而言之：

当您从 JavaScript 向页面本身的其他来源触发请求时，服务器需要使用适当的 HTTP 标头响应浏览器发出Access-Control-Allow-Headers的预检请求，以便浏览器安全性不会阻止请求。

要获得更长的答案，请参阅this one of a duplicate question。

于 2021-06-22T10:52:40.837 回答