Question

这已经让我有些问题了。我设置了一组api-向它们发出POST请求时，会在postman中获得所有必需的响应标头。

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端点地址？ “跨域请求被阻止”表示HTTP请求是通过未经授权的URL发送的（有时您的本地dev角度url是localhost，但是API是不同的域，例如：http://firebase/api。在这种情况下，API对待您的localhost是未经授权的域）。对于此问题，您需要将API的CORS设置为允许接受来自本地主机的http请求。希望我能帮忙，谢谢您的投入。

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

3 个答案: