[Solved]Http headers are not sent in ionic 2

[Sumeet123]

This is not a CORS issue

endpoint :- ‘http://xyz.com/abc’

Ionic v1 app (WORKS)

$http.defaults.headers.common.Authorization = 'Basic something=';

Angular 2 web app (works)

const headers = new Headers({'Content-Type': 'application/json'});
headers.append('withCredentials','true');
headers.append('Authorization', 'Basic something=');

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


 this._http.post('endpoint ', formData , options)

Ionic 2 (DOES NOT WORK)

const headers = new Headers({'Content-Type': 'application/json'});
headers.append('withCredentials','true');
headers.append('Authorization', 'Basic something=');

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


 this._http.post('endpoint ', formData , options)

Ionic 2 try 2 (DOES NOT WORK)

const headers = new Headers({'Content-Type': 'application/json'});
headers.append('withCredentials','true');
headers.append('Authorization', 'Basic something=');

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


 this._http.post('endpoint ', formData , options)

Someone already posted this on stackoverflow :- http://stackoverflow.com/questions/38775587/ionic-2-angular-2-cors-http-headers-not-being-sent-with-request

Any help would be appreciated. Thanks.

[Sumeet123]

Better way to add HTTP auth headers from SqlStorage?

I had my question answered here: https://stackoverflow.com/questions/38928156/use-promise-for-headers-in-angular-2-http-client-wrapper#38929151 By replacing my HTTPClient get function with this: get(url) { return Observable .fromPromise(this.buildHeaders()) .switchMap((headers) => this.http.get(url, { headers: headers })); } It returns an Observable, so it functions just like the Angular HTTP object. However, I’m still not sure if there is a better way to do auth head…

Solution

[rajpatangay]

I have been using HTTP calls from with in my enterprise Ionic 2 app with headers for last few months and the below code implementation works for me -

import {Injectable} from ‘@angular/core’;
import {Http, Headers, RequestOptions } from ‘@angular/http’;
import ‘rxjs/add/operator/map’

@Injectable()
export class AemesCommonService {

public data;
public response;

constructor(public http: Http) {
this.http = http;
}

fetchStations(authHeader, authUrl): any {
let _header = new Headers();
_header.append(‘Authorization’, authHeader);
return this.http.get(authUrl,
{ headers: _header }).map(
response => response.json
());
}

updateChangedStation(apiHeader, apiUrl): any {

let _headers = new Headers({ 'Authorization': apiHeader });
let _options = new RequestOptions({headers: _headers});
let _body = {};

return this.http.post(apiUrl, _body,
  _options).map(
  response => response.json
    ());

}
}