Ionic 2 / Angular 2 / CORS: HTTP Headers not being sent with request

Question

I'm working on a project using Ionic 2 (2.0.0-beta.10). I try to pass an authorization token with the request. However the header is not being sent. Also other headers I tried to pass with the request are not being sent.

let url = 'http://www.example.com/savedata';
let data = JSON.stringify({ email: '[email protected]', password: '123456' });

let headers = new Headers();

headers.append('Content-Type', 'application/json');
headers.append('Authorization', 'Bearer ' + "tokenContent");

let options = new RequestOptions({ headers: headers });

this.http.post(url, data, options).map(res => res.json()).subscribe(data => {

                console.log("it worked");

}, error => {
                console.log("Oooops!");
});

My REST API receives this request with the following headers:

Host:               www.example.com 
Connection:         keep-alive  
Access-Control-Request-Method:  POST    
Origin:             http://evil.com/    
User-Agent:         Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.106 Safari/537.36   
Access-Control-Request-Headers: authorization, content-type 
Accept:             */* 
Referer:            http://localhost:8100/?restart=794567   
Accept-Encoding:        gzip, deflate, sdch 
Accept-Language:        en-US,en;q=0.8  

The data (body) comes in correct, only the headers problem I cannot resolve. Any help would be very appreciated.

Answer 1

This question has an answer here: https://stackoverflow.com/a/45286959/4119650

Headers.append() does not update the object, it returns a clone of it. By instantiating the Headers object and then calling headers.append(), the result of that append isn't being used. Instead, you may need to do this:

headers: Headers = new Headers().append('Content-Type', 'application/json').append('Authorization', 'Bearer ' + "tokenContent");

Headers is deprecated anyway, and should be replaced with HttpHeaders and HttpClient. https://angular.io/api/common/http/HttpHeaders https://angular.io/guide/http