Menu
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.
648
One way to fix it is by enabling proper CORS headers request on the server-side. Another way is to configure Angular CLI proxy. Note: The correct approach or solution is to configure the backend server, but that may not always be feasible.
The correct and easiest solution is to enable CORS by returning the right response headers from the web server or backend and responding to preflight requests, as it allows to keep using XMLHttpRequest, fetch, or abstractions like HttpClient in Angular.
One thing it doesn’t do is set a lot of HTTP request headers. Now that makes sense as Angular doesn’t know what you are doing with a request so you really need to do so. But most Http request made with the Http service are going to be for JSON serialized data. The default request however add no headers to let the server know this.
Then headers and params can be passed to RequestOptions as given below. Angular Http.get () method performs a request with HTTP GET method. Find the arguments of Http.get () method. get(url: string, options?: RequestOptionsArgs) : Observable<Response>
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
125
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
