Angular 2 Post: Not sending 'content-type: application/json' to server

Question

I'm really struggling with POST-requests in Angular 2. I'm able to send a request with certain parameters, but my backend (PHP Slim v3) can't get the parameters. Therefore I investigated my request, and realized that my Angular request sends 'content-type: application/text-plain'. Therefore my backend doesn't have access to the variables.

Then, I read many tutorials, browsed here on stack overflow and came to the conclusion that I have to append the header.

My angular class looks like this:

/**
* Generic method for all POST-requests.
* 
* @author 
* @date 08.01.2017
*/
postData(apiUrl, data): any
{

    let headers = new Headers({ 'Content-Type': 'application/json' });
    let options = new RequestOptions({ headers: headers });
    let body = JSON.stringify(data)

    return this.http.post(apiUrl, body, options)
        .map((responseData) => 
        {
            if(responseData.status === 200)
            {
                return this.extractData(responseData);
            }
            else
            {
                this.handleRestError(null); 
            }
        })
        .catch(res => {
            return this.handleRestError(res);
       });
}

So all in all pretty simple. However, when I send that request, the strange thing is, that it somehow recognizes that as an OPTIONS request and gives me 'Unsupported method: OPTIONS'.

Please see the request header here:

OPTIONS /auth/new HTTP/1.1
Host: localhost:8080
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
Access-Control-Request-Method: POST
Origin: http://localhost:8100
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.87 Safari/537.36
Access-Control-Request-Headers: content-type
Accept: */*
Referer: http://localhost:8100/
Accept-Encoding: gzip, deflate, sdch, br
Accept-Language: de-DE,de;q=0.8,en-US;q=0.6,en;q=0.4

My response from the backend looks the following:

HTTP/1.1 200 OK
Host: localhost:8080
Connection: close
X-Powered-By: PHP/5.6.28
Set-Cookie: PHPSESSID=aa546thl9maj7hamjj64vpbe95; path=/
Expires: Thu, 19 Nov 1981 08:52:00 GMT
Cache-Control: no-store, no-cache, must-revalidate, post-check=0, pre-check=0
Pragma: no-cache
Content-type: text/plain;charset=UTF-8
Allow: POST
Access-Control-Allow-Methods: OPTIONS
Content-Length: 21

And the response from the server looks like this:

Allowed methods: POST

However, I have managed to get a proper response from the server with omitting the options parameter in the post request. The request then gets sent properly and I see the desired parameters in the request payload in Chrome console. The problem is that I can't get access to the variables on backend, because it keeps giving me a 'content-type: text/plain'.

Any idea what I'm doing wrong?

Thanks for help in advance!

Answer 1

this because you face with CORS problem, so you need allow with OPTIONS method too (backend). something like this:

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Headers: Content-Type
Access-Control-Max-Age: 86400

Learn more about CORS here: https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS