CODEWITHSUNDEEP
angularweb-servicescors
wsaxton
wsaxton

Reputation: 1082

Getting "No 'Access-Control-Allow-Origin' header is present on the requested resource" error even though CORS is setup properly

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:*

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.

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

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

Request Method:OPTIONS
Status Code:200 OK

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);
}

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);
}

And here is getHeaders():

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

Upvotes: 3

Views: 4681

Answers (2)

wsaxton
wsaxton

Reputation: 1082

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.

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.

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.

Upvotes: 4

Andrei Matracaru
Andrei Matracaru

Reputation: 3671

Check out this article for a detailed explanation on CORS.

The difference between Get and Post is that Post should have an extra header for Content-Type. I don't see you setting that header in your code by the way, and I don't know if Angular or the browser will set it for you.

My opinion is that its related to the content type header, either it's not configured on the server as an Access-Control-Request-Headers or you need to explicitly set it from your client code.

Upvotes: 3

Related Questions