即使正确设置了CORS，也会出现“请求的资源上不存在'Access-Control-Allow-Origin'标头”错误答案

【问题标题】：Getting "No 'Access-Control-Allow-Origin' header is present on the requested resource" error even though CORS is setup properly即使正确设置了CORS，也会出现“请求的资源上不存在'Access-Control-Allow-Origin'标头”错误
【发布时间】：2018-01-13 15:21:16
【问题描述】：

尝试访问不同域中的 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

当我尝试访问网络服务的 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);
}

失败的是网络服务的 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; 
}

【问题讨论】：

标签： angular web-services cors

【解决方案1】：

查看this article 了解有关 CORS 的详细说明。

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

我的观点是它与内容类型标头有关，要么它没有在服务器上配置为 Access-Control-Request-Headers，要么您需要从您的客户端代码中显式设置它。

【讨论】：

那篇文章几乎描述了我的确切情况。我将 Content-Type:application/json 添加到标题并验证它是否出现。它似乎没有任何影响。服务器预检正在发回：Access-Control-Allow-Headers:Content-Type Access-Control-Allow-Methods:GET, POST, DELETE, PUT, OPTIONS Access-Control-Allow-Origin:* Allow:HEAD,POST, GET,OPTIONS 所以看来服务器也配置正确。
想通了。看我的回答。

【解决方案2】：

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

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

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

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

【讨论】：