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

【问题标题】：CORS preflight issue in Angular 7 application - response headers ignoredAngular 7 应用程序中的 CORS 预检问题 - 响应标头被忽略
【发布时间】：2019-05-21 04:18:32
【问题描述】：

这已经给我带来了一段时间的一些问题。我设置了一组 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 内容类型发送，并且在服务器上设置了所有必需的标头。那么这里的问题到底是什么？

【问题讨论】：

问题不在于响应缺少 CORS 标头，而是响应是 401 错误而不是 200 OK。原因是，您将请求发送到的 nginx 服务器（位于 tje environment.url URL）显然未配置为正确响应 OPTIONS 请求。它必须配置为响应未经身份验证的 OPTIONS 请求，无论来源如何，都带有 200 OK 和正确的 CORS 标头。但是当它响应 401 而不是 200 时，它是否具有正确的 CORS 标头实际上并不重要——因为 401 会使预检失败

标签： javascript node.js angular express nginx

【解决方案1】：

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

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

【讨论】：

【解决方案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: *

这将使您的声明再次有效。

【讨论】：

事情是，如果我通过邮递员发送一个 POST 请求，我会得到上面提到的标题。但是 OPTIONS 请求返回上述内容
得到问题排序授权中间件阻止服务器上的选项。现在工作

【解决方案3】：

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

【讨论】：