Angular 4 : No 'Access-Control-Allow-Origin', but only with post requests

Question

I know there already is a few questions on the topic, but I can't seem to find a solution to my problem.

I am fairly new to angular 4, and I am trying to build a simple create/update/delete service using an external custom API.

I first had issues with CORS, but that was fixed by setting the "Access-Control-Allow-Origin" header on the server side of the api.

Now my GET/PATCH and DELETE request work fine, but my "POST" still catches an error.

And here's the "odd" part.

When I check into the "network" tab of google chrome's developper tools, I see both "OPTIONS" and then "POST" request (as angular is supposed to do), but only the "OPTIONS" has "Access-Control-Allow-Origin:http://localhost:3003" in the response headers.

However they both send a "200" response code. (Here are some screenshots)

Why would the post break wheras the others work fine ?

Here are some code samples from my service :

private headers = new Headers({'Content-Type': 'application/json'});

// works
update(id: number, fields: any): Promise<Tag> {
    const url = `${this.tagsUrl}/${id}`;
    return this.http
        .patch(url, JSON.stringify(fields), {headers: this.headers})
        .toPromise()
        .then(res => res.json())
        .catch(this.handleError);
}

// doesn't work
create(tagName: string, tagType: number): Promise<any> {
    return this.http
        .post(this.tagsUrl, JSON.stringify({name: tagName, tagType: tagType}), {headers: this.headers})
        .toPromise()
        .then(res => res.json())
        .catch(this.handleError);
}

Thanks in advance for any help you can bring !

Michael

This is not an Angular related issue. It's the backend that does something wrong. I would recommend running Angular on the same host as your backend. So it skip the preflight it can become a pain. — Swoox
– Swoox, Commented Oct 3, 2017 at 14:16
I see. I'll try to find a solution with the person in charge of the backend then. But how come the problem only appears with "post" and not any other method ? — Michael C.
– Michael C., Commented Oct 5, 2017 at 10:24
Then the post is not allowed by the backed. I'm not sure if preflight only comes with POST but just google it and you will find your answer. — Swoox
– Swoox, Commented Oct 5, 2017 at 11:26

Michael C. · Accepted Answer · 2017-10-10 08:09:41Z

1

I have finally found where the problem came from.

It came from my local server configuration. I had to uncomment this line from my php.ini :

always_populate_raw_post_data = -1

It now works as intended.

Thank you for your help.

answered Oct 10, 2017 at 8:09

Michael C.

213 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular 4 : No 'Access-Control-Allow-Origin', but only with post requests

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related