Angular2 Headers not setting up properly

Question

I'm making a simple post request using angular2 http.

The problem is it doesn't set header properly. Instead of setting content type and authorization, all I get is this

Accept:*/*
Accept-Encoding:gzip, deflate, sdch, br
Accept-Language:en-US,en;q=0.8
Access-Control-Request-Headers:authorization, content-type
Access-Control-Request-Method:POST
Connection:keep-alive
Host:api.joinmunch.com
Origin:http://localhost:8100
Referer:http://localhost:8100/
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2785.143 Safari/537.36

Here is my code

    let bodyString = JSON.stringify(user); // Stringify payload
    let headers      = new Headers({ 'Content-Type': 'application/json' }); // ... Set content type to JSON
    headers.append('Authorization', 'bearer MY_AUTH_TOKEN');

    let options       = new RequestOptions({ headers: headers }); // Create a request option
    options.withCredentials = true;

    return this.http.post(this.baseUrl + 'customer/register', bodyString, { headers: headers }) // ...using post request
                         .map((res:Response) => res.json()) // ...and calling .json() on the response to return data
                         .catch((error:any) => Observable.throw(error.json().error || 'Server error')); //...errors if an

Here is the response headers

HTTP/1.1 401 Unauthorized
Server: nginx
Date: Fri, 14 Oct 2016 16:03:36 GMT
Content-Type: application/json; charset=utf-8
Transfer-Encoding: chunked
Connection: keep-alive
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, PUT, DELETE
Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept

Paul Samsotha Paul Samsotha · Accepted Answer · 2016-10-14T16:07:41

That's just the CORS preflight request, not the actual request. You can tell that the headers would be set on the real request from this

Access-Control-Request-Headers:authorization, content-type

The preflight request is asking the server if it will accept the content-type and authorization headers, which are the headers that you set

If you don't know about CORS, then check out the link. Maybe it will help you solve any real problem you may have, because the problem is not with the headers not being set.

Angular2 Headers not setting up properly

1 Answers