即使正确设置了 CORS，也出现"No 'Access-Control-Allow-Origin' header is present on the requested resource"错误

Question

尝试访问不同域中的 Web 服务，并在服务器上启用 CORS。 当我使用 Postman 测试 Web 服务时，一切正常，我确实收到了以下响应标头：

Access-Control-Allow-Headers:Content-Type
Access-Control-Allow-Methods:GET, POST, DELETE, PUT, OPTIONS
Access-Control-Allow-Origin:*

当我的Web应用程序(Angular 2(尝试向它开机自检时，我得到：

XMLHttpRequest cannot load http://example.com/mywebservice. No 'Access-Control-Allow-Origin' header is present on the requested resource.

我不确定为什么 Postman 似乎收到了正确的变量设置，但我的浏览器仍然阻止我使用它。

根据Chrome调试器，预检响应似乎工作正常：

Request Method:OPTIONS
Status Code:200 OK

当我尝试访问 Web 服务的 GET 部分时，一切正常：

getJob(id: number): Observable<Job> {
let myParams = new URLSearchParams();
myParams.append('id', id + "");
let options = new RequestOptions({ headers: this.getHeaders(), params: myParams});
return this.http
.get(this.jobsUrl, options)
.map(res => res.json().data as Job)
.catch(this.handleError);
}

失败的是 Web 服务的 POST 部分：

createJob(job: Job): Observable<any> {
let options = new RequestOptions({ headers: this.getHeaders()});
return this.http
.post(this.jobsUrl, job, options)
.map(res => res.json().jobID)
.catch(this.handleError);
}

这是getHeaders((：

private getHeaders() {
let headers = new Headers();
headers.append('Content-Type','application/json');
return headers; 
}

Answer 1

以下错误消息可能会令人困惑：

XMLHttpRequest cannot load http://example.com/mywebservice. No 'Access-Control-Allow-Origin' header is present on the requested resource.

当服务器上未正确设置 CORS 时，可能会发生此消息，但如果服务器本身使用非 2XX 状态代码(即 500(进行响应，则也会发生此消息。 我想，因为这是一个错误，服务器觉得不需要填充适当的启用 CORS 的响应标头。 当浏览器看不到这些标头时，它会返回此类似 CORS 的错误。

如果您很好奇，我的 Web 服务失败的原因是因为我试图将"应用程序/json"数据提交给它不支持的 Web 服务。 一旦我将其切换为使用"application/x-www-form-urlencoded"并稍微修改了角度语法，它就可以正常工作。

Answer 2

查看这篇文章，了解有关 CORS 的详细说明。

Get 和 Post 之间的区别在于 Post 应该有一个额外的内容类型标头。顺便说一下，我没有看到您在代码中设置该标头，也不知道 Angular 或浏览器是否会为您设置它。

我的观点是它与内容类型标头有关，要么它没有在服务器上配置为访问控制请求标头，要么您需要从客户端代码中显式设置它。