Angular 7 应用程序中的 CORS 预检问题 - 响应标头被忽略

Question

一段时间以来，这一直给我带来一些问题。 我设置了一组 api - 当我向它们发出 POST 请求时，我在邮递员中获得了所有必需的响应标头。

Access-Control-Allow-Credentials →true
Access-Control-Allow-Headers →*
Access-Control-Allow-Methods →GET, POST, PUT, PATCH, DELETE, HEAD, OPTIONS
Access-Control-Allow-Origin →*

但是，我的基本 http.post 在我的 Angular 应用程序中失败，因为它发送了 OPTIONS 预检请求。 但回应似乎并不正确。 以下是控制台中发送的请求标头和收到的响应：

要求

Host: ...
User-Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:62.0) Gecko/20100101 Firefox/62.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-US,ur;q=0.7,en;q=0.3
Accept-Encoding: gzip, deflate
Access-Control-Request-Method: POST
Access-Control-Request-Headers: content-type
Origin: http://localhost:4200
Connection: keep-alive

回复

HTTP/1.1 401 Unauthorized
Server: nginx/1.15.7
Date: Thu, 20 Dec 2018 15:45:49 GMT
Content-Type: application/json; charset=utf-8
Content-Length: 61
Connection: keep-alive
X-Powered-By: Express
ETag: W/"3d-q6cGyOBiwGshxQdcFRrR1zCi7Cw"

控制台中的错误消息是： Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at (Reason: CORS header 'Access-Control-Allow-Origin' missing).

但事实并非如此——服务器设置为发送所有正确的标头。

这是我的代码：

const httpOptions = {
  headers: new HttpHeaders({'Content-Type': 'application/json' })
};

...

  login(email:string, password:string){
    var url = environment.url;

    let data = {email:email, password:password};

    let response = this.http.post(url, (data), httpOptions);
    return response;
  }

我需要将数据作为 application/json 内容类型发送，并且在服务器上设置了所有必需的标头。 那么这里到底是什么问题呢？

Answer 1

OPTIONS请求与 Angular 无关，它是由您的浏览器触发的，因为您正在从另一个域访问资源。

因此解决方案是将Access-Control标头添加到 Express 服务器上的OPTIONS动词，因为它们不存在于您粘贴的响应标头中。

Answer 2

您的服务器响应是：

HTTP/1.1 401 Unauthorized
Server: nginx/1.15.7
Date: Thu, 20 Dec 2018 15:45:49 GMT
Content-Type: application/json; charset=utf-8
Content-Length: 61
Connection: keep-alive
X-Powered-By: Express
ETag: W/"3d-q6cGyOBiwGshxQdcFRrR1zCi7Cw"

你写了

...那不是真的 - 服务器设置为发送所有正确的标头。

这清楚地表明你写的是无效的。

您的服务器响应缺少标头：

Access-Control-Allow-Origin: *

这将使您的陈述再次有效。

Answer 3

你的 Angular 运行 URL 是什么？ http://localhost:4200 ？ 还有你的 API 端点地址？ “Cross-Origin Request Blocked”意味着 http 请求是通过未经授权的 URL 发送的（有时您的本地开发角度 url 是本地主机，但 API 是不同的域，例如： http://firebase/api 。这种情况下，API 对待您的本地主机是未经授权的域）。 对于这个问题，您需要设置 API 的 CORS 以允许接受来自本地主机的 http 请求。 希望我能提供帮助，感谢您的任何意见。