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

Question

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

错误

XMLHttpRequest 无法加载 http://example.com/account/create。对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，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 只能使用 Access-Control-Allow-Origin 标头在服务器端进行管理。

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

1. 添加*——这将启用所有来源（不推荐在 生产环境）
2. 添加localhost:4200（包括端口！）——这将明确授予 只有域+端口到您的服务器

Answer 2

你确定你的 apiUrl 变量中有 http:// 部分作为 postFormData 函数的参数发送。在使用 HttpClient 函数时，http:// 部分看起来非常重要。

Answer 3

// 添加 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 4

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

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

Mozilla 有一篇很好的文章 here。