Angular 7：响应预检请求未通过访问控制检查：请求中不存在“Access-Control-Allow-Origin”头部

Question

我需要实现一个具有CURD操作的Angular应用程序。API已经托管在AWS上，使用Postman可以正常工作。

但是我的Angular应用程序出现了以下问题：

访问来自源 'http://localhost:4200' 的XMLHttpRequest到'https://acp56df5alc.execute-api.us-east-1.amazonaws.com/ams/getmember'已被CORS策略阻止：响应预检请求未通过访问控制检查：所请求的资源上不存在“Access-Control-Allow-Origin”头。

以下是我的代码：

http_GET(actionUrl: string): Observable<any> {
        const httpOptions = {
            headers: new HttpHeaders({
                'Content-Type': 'application/json',
                'Access-Control-Allow-Origin': '*',
                'Access-Control-Allow-Credentials': 'true',
                'Access-Control-Allow-Headers': 'Content-Type',
                'Access-Control-Allow-Methods': 'GET,PUT,POST,DELETE',
                'key': 'x-api-key',
                'value': 'NNctr6Tjrw9794gFXf3fi6zWBZ78j6Gv3UCb3y0x',

            })
        };
        return this.http.get<any>(this.baseUrl + actionUrl, httpOptions).pipe(
            (response => {
                return response;
            }));
    }

我已经努力尝试解决这个问题了，但还需要一些帮助。

- Isanka Thalagala

---

我刚刚遇到了这个完全相同的错误消息（除了域名），而且之前应用程序是正常工作的，所以知道这不应该是真正的CORS问题，结果发现我在服务器上重命名了一个目录，但没有在web.config文件中重命名该目录。也许值得检查一下是否有其他失败的内容，可能会导致这个错误消息出现误报。 - dmoore1181

Answer 1

我有同样的 CORS 问题，尝试了所有建议的设置 Access-Control-Allow-Origin * 的方法均未成功。
后来我发现了两个问题：

1. 我通过 POST 请求发送的数据格式不正确。
2. 服务器无法处理从 post 请求接收到的空参数。

原始请求：

return this.http.post(API_URL + 'customer/login',
  {email: email, password: password},{ headers: headers}
)

在使用JSON.stringify()对文章数据进行包装后，程序得以正常运行。

return this.http.post(API_URL + 'customer/login',
      JSON.stringify({email: email, password: password}),{ headers: headers}
    )

- ovicko

Answer 2

所有/大部分这些标头需要在服务器端（托管AWS API的服务器）上定义，而不是客户端。

最初的回答：大多数标头需要在服务器端定义，而不是在客户端定义。

 headers: new HttpHeaders({
                'Content-Type': 'application/json',
                'Access-Control-Allow-Origin': '*',
                'Access-Control-Allow-Credentials': 'true',
                'Access-Control-Allow-Headers': 'Content-Type',
                'Access-Control-Allow-Methods': 'GET,PUT,POST,DELETE',
                'key': 'x-api-key',
                'value': 'NNctr6Tjrw9794gFXf3fi6zWBZ78j6Gv3UCb3y0x',
  ...

最有可能的原因是Postman直接发送了GET请求。而你发送的是一个复杂请求，被称为“预检请求”，会在实际GET请求之前发送一个OPTIONS请求。这是远程服务器不允许的。

- jcuypers

---

这些属性应该在哪里定义？ - Keshav Pradeep Ramanath

Answer 3

这是一个常见的CORS问题，如果你在后端使用asp .net core，可以通过按照这个帖子启用CORS来解决问题。

- LeonardoX