如何修复 Angular 5 中的 CORS 问题 http 请求

Question

我是 Angular 5 的新手，我想发送 http 请求，但它在检查元素中返回 CORS 错误。

错误

XMLHttpRequest 无法加载http://example.com/account/create。对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，不允许访问来源“ http://localhost:4200 ”。响应的 HTTP 状态代码为 403。

下面是我的代码：

postFormData(apiUrl: string, value: Object): Observable<any> {
const body = value;
const headers = new Headers();
const utcOffset = -(new Date().getTimezoneOffset());
headers.append('Content-Type', 'application/json');
headers.append('utc-offset', utcOffset.toString());
headers.append('platform', 'WEB');
headers.append('app-version', '1.00');
headers.append('version', '1.0');
headers.append('accept', 'application/json');
headers.append('Access-Control-Allow-Origin', '*');
headers.append('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
headers.append('Access-Control-Allow-Headers', 'X-Requested-With,content-type');

if (localStorage.getItem('user')) {
  const user = JSON.parse(localStorage.getItem('user'));
  headers.append('token', user.token);
  headers.append('session', user.session);
}
// const options = new RequestOptions({ headers: headers });
return this.http.post(apiUrl, body, { headers: headers })
  .map(this.extractData)
  .catch(this.handleServerError);
}

Answer 1

CORS 是浏览器使用的一种工具，用于防止一个源（在您的情况下为 localhost）访问另一个源（example.com）的资源，而无需服务器明确表示您可以通过 CORS 标头等访问它Access-Control-Allow-Origin。

服务器需要提供这些标头以便您访问其资源。

Mozilla在这里有一篇很好的文章。