获得“在所请求的资源上不存在'Access-Control-Allow-Origin'报头".即使正确设置了CORS，也会出现错误 [英] Getting "No 'Access-Control-Allow-Origin' header is present on the requested resource" error even though CORS is setup properly

问题描述

尝试在服务器上启用了CORS的情况下访问其他域中的Web服务.当我用Postman测试Web服务时，一切正常，并且确实收到以下响应标头:

Trying to access a web service in a different domain, with CORS enabled on the server. When I test out the web service with Postman, everything works fine and I do receive the following response headers:

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

当我的Web应用程序(Angular 2)尝试对其进行POST时，我得到:

When my web application (Angular 2) tries to POST to it, I get:

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

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

I'm not sure why Postman seems to be receiving the proper variable setting but my browser is still preventing me from using it.

根据Chrome调试器，预检响应似乎运行良好:

According to Chrome debugger, the preflight response seems to have worked fine:

Request Method:OPTIONS
Status Code:200 OK

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

When I try to access the GET portion of the web service, everything works fine:

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部分失败:

It's the POST portion of the web service that fails:

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():

And here is getHeaders():

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

推荐答案

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

The following error message can be confusing:

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

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

This message can occur both when CORS is not set up properly on the server but it can ALSO occur if the server itself responds with a non-2XX status code (ie 500). I guess, because it's an error, the server doesn't feel the need to populate the appropriate CORS-enabling response headers. When the browser doesn't see those headers, it returns this CORS-like error.

以防万一，我的Web服务失败的原因是因为我试图向不支持的Web服务提交"application/json"数据.一旦我将其切换为使用"application/x-www-form-urlencoded"并稍微修改了角度语法，它就可以正常工作.

In case you are curious, the reason my web service was failing was because I was trying to submit 'application/json' data to the web service which it did not support. Once I switched it to use 'application/x-www-form-urlencoded' and modified the angular syntax a bit, it worked fine.

这篇关于获得“在所请求的资源上不存在'Access-Control-Allow-Origin'报头".即使正确设置了CORS，也会出现错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！