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: 'test@test.com', 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

Answer 2

Try to use HttpClient. It is easiest and latest one.

constructor(private http: HttpClient) {}
...
...

postData() {
   const httpHeaders = new HttpHeaders({
    'Content-Type' : 'application/json',
    'Cache-Control': 'no-cache',
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Credentials': 'true',
    'Access-Control-Allow-Methods': 'GET, POST, OPTIONS, PUT, DELETE',
    'Access-Control-Allow-Headers': 'Origin, Accept, Access-Control-Allow-Origin, Content-Type, Authorization, X-Requested-With'
    });

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


   this.http.post(url, data, { headers: httpHeaders, observe: 'response'}).subscribe(data => {    
                console.log("it worked");    
   }, error => {
                console.log("Oooops!");
   }); // Here you don't need to use map().
}

Answer 3

If you are calling REST API (example.com in your example) that is located on a different domain from your Angular 2 / Ionic app ( evil.com in your example), then you need to configure REST API server to return this header:

Access-Control-Allow-Origin: http://evil.com 

Which will allow the browser to send async HTTP requests from evil.com host to the rest api server.

It is done by enabling CORS on the rest api server, you can read about it a bit more.

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

Several libraries for the backend that enable cross origin requests:

https://github.com/expressjs/cors - NodeJS/Express

https://pypi.python.org/pypi/Flask-Cors/ - Python cors library for Flask

and the list continues for almost any other backend framework.

Answer 4

Stringify JSON this not realy working at all times. First you need to convert your JSON data to StringQuery to be understand by the server properly and much faster way.

public StringQuery(jsonString) {
        return Object.keys(jsonString).map(function (key) {
          return encodeURIComponent(key) + '=' + encodeURIComponent(jsonString[key]);
        }).join('&');
      }   

then you make your post function or method

public post(){
let url = 'http://www.example.com/savedata';
let data = this.StringQuery({ email: 'test@test.com', password: '123456' })




    let headers = new Headers();

    headers.append('Content-Type', 'application/x-www-form-urlencoded');
    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!");
    });
}

I use this code too and get success post request.

Answer 5

For sending and receiving you might be using one server ex:Nginx Config file in sites-enabled for backend ,there you have to add Access-Control-Allow-Origin: * or http://localhost that can be helpful.