如何在Angular 5中修复CORS问题http请求[重复]

Question

这个问题在这里已有答案：

• How does Access-Control-Allow-Origin header work? 13个答案

我是Angular 5的新手，我想发送http请求，但它在inspect元素中返回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）访问资源，而服务器没有明确表示您可以通过像Access-Control-Allow-Origin等其他CORS头来访问它。

服务器需要提供这些标头才能访问它的资源。

Mozilla有一个很好的写作here。

Answer 2

//添加CORS头。

Example :

const Url = 'http://localhost:3000/';
const headers = new Headers;
const body = JSON.stringify(
{
title: "data" 
});
headers.append('Access-Control-Allow-Origin', '*');
this.http.post(Url, body, { headers: headers })
.pipe(map(res => res))
.catch(err => err);

// you can also use HTTP headers

import { HttpHeaders } from '@angular/common/http';

let header = new HttpHeaders();
header.set('Access-Control-Allow-Origin', '*');

Answer 3

你确定你的api Url变量发送了http：// part作为postData函数的参数发送。使用HttpClient函数时，http：//部分看起来非常重要。

Answer 4

CORS只能使用Access-Control-Allow-Origin标头在服务器端进行管理。

在您的情况下，当在localhost:4200上提供Angular客户端时，您有2个选项可用于此标头的值：

1. 添加* - 这将启用所有来源（不建议在生产环境中使用）
2. 添加localhost:4200（包括端口！） - 将显式授予您的服务器域+端口