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

标签 javascript xmlhttprequest angular2-services angular5

<分区>

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

错误

XMLHttpRequest cannot load http://example.com/account/create. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access. The response had HTTP status code 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);
}

最佳答案

CORS 是浏览器使用的一种工具,用于防止一个来源(在您的情况下为 localhost)从另一个来源(example.com)访问资源,而服务器没有明确说明您可以通过 CORS header 访问它,例如 Access-Control-允许来源 和其他。

服务器需要提供这些 header 以便您访问它的资源。

Mozilla 对此有很好的描述 here .

关于javascript - 如何修复 Angular 5 中的 CORS 问题 http 请求,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48456448/

相关文章:

javascript - 不明白这个 setTimeout 如何/为什么解决我的 IE8 问题

javascript - 如何更改 Ant 表头复选框

javascript - 跨域ajax使用脚本标签

Angular 2兄弟组件2方式绑定(bind)

Angular:覆盖组件的功能

javascript - Chrome 扩展程序无法访问数据存储

Javascript JSON.parse 不返回任何内容

javascript - 停止代码执行,直到 XMLHttpRequest 周期完成

javascript - 使用 Javascript 确定 Accept-Language HTTP 请求 header — 或以其他方式确定用户的首选语言

javascript - JSON 响应位于数组中,但仍引发错误 "NgFor only supports binding to Iterables such as Arrays"