Angular 2 http.get is not sending the token in the header

Question

I have a post method which is working and fetching my token from the server

authenticate() {
  let url = this.server + 'authenticate';
  let headers = new Headers({ 'Content-Type': 'application/json' });
  let options = new RequestOptions({ headers: headers });

  let body = JSON.stringify({
    'password': 'admin',
    'rememberMe': true,
    'username': 'admin'
  });
  return this._http.post(url, body, options)
    .map((res: Response) => res.json())
    .subscribe(result => this.token = result.id_token);
}

where this.server is a string having the url of the server. and this._http is just an instance of the angular Http

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

and this.token is just an empty string private token: string;

Now all this is working just fine and I am getting the right token from the server. My problem is that when I try to use this token in a get method it doesn't work and I get a 401 (unauthorized) error.

My buggy get method is:

getData(src) {
  let url = this.server + src;
  let headers = new Headers({'Authorization': 'Bearer ' + this.token});
  return this._http.get(url, headers)
  .map((res: Response) => res.json())
  .subscribe(res => console.log('res'));
}

Mostafa Fateen · Accepted Answer · 2016-07-11 08:53:45Z

1

So the problem was that I should have added {} around the headers when I sent them. the get should be this._http.get(url, { headers })

answered Jul 11, 2016 at 8:53

Mostafa Fateen

8471 gold badge15 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Gijs · Accepted Answer · 2016-11-17 20:03:03Z

1

Http.get takes a url string and an optional RequestOptionsArgs as parameters. Wrapping the header in a RequestOptions object should do the trick.

getData(src) {
  let url = this.server + src;
  let headers = new Headers({'Authorization': 'Bearer ' + this.token});
  let options = new RequestOptions({ headers: headers });
  return this._http.get(url, options)
    .map((res: Response) => res.json())
    .subscribe(res => console.log('res'));
}

edited Nov 17, 2016 at 20:03

Gijs

916 bronze badges

answered Jul 8, 2016 at 18:31

Keifer Caebe

6176 silver badges9 bronze badges

4 Comments

Mostafa Fateen Over a year ago

I actually had it like that and there is no difference what so ever

Keifer Caebe Over a year ago

add a return in the .map() call .map((res:Response => return res.json())

Mostafa Fateen Over a year ago

Thank you for you, but that wasn't the problem. I wrote the answer if you want it

Keifer Caebe Over a year ago

Using the {} might work, but the correct way is to use a RequestOptions object. I have updated my answer to reflect this.

Collectives™ on Stack Overflow

Angular 2 http.get is not sending the token in the header

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related