How to set a header with http.get

Question

I'm using Angular 4.4.4 and I need to set the Authorization header for a GET request. I've studied the docs and the code to figure out how to do this. This was the result:

const headers = new Headers({ Authorization: this.auth.accessToken});
this.http.get('/api/Messages', { headers } as RequestOptionsArgs)

However, this doesn't work. The request is made without the header option.

But if I do it as follows

const options = { headers: {Authorization: this.auth.accessToken} as any};

return this.http.get('/api/Messages', options as RequestOptionsArgs)

It works.

But I would expect the first attempt to work too. Can someone explain to me what is wrong with my first attempt or explain to me what the correct approach is?

I would also expect the first attempt to work. Are you using `@angular/http` or `@angular/common/http`? — jonrsharpe, Sep 30 '17 at 12:09
I'm using `@angular/http`. The weird thing is that if I debug and step into the angular code I see very soon something like this: `this.headers = new Headers(requestOptions.headers);` but `requestOptions.headers` is already an instance of `Headers`. It doesn't make any sense — Jeanluca Scaljeri, Sep 30 '17 at 12:20
In the first one 'headers:' key is missing. You are assigning without the key {{ Authorization: this.auth.accessToken}} instead of {headers:{ Authorization: this.auth.accessToken}} — Vega, Sep 30 '17 at 12:44
You mean that I do `{headers}` instead of `{headers: headers}`? But these two are identical in es2015/typescript — Jeanluca Scaljeri, Sep 30 '17 at 12:51
what if you strip the { } entirely and just pass in headers? I think newing up an angular Headers object gets you what you need to pass into the get function — bgraham, Sep 30 '17 at 14:42
Nope, doesn't fix it. I will try to make a [StackBlitz](https://stackblitz.com/) so you can see it in action, just a moment — Jeanluca Scaljeri, Sep 30 '17 at 14:54
The question lacks http://stackoverflow.com/help/mcve . Are you certainly importing Headers? — Estus Flask, Sep 30 '17 at 16:12
Aren't `Headers` a browser thing ( [MDN](https://developer.mozilla.org/nl/docs/Web/API/Headers)) but I agree, I'm working on a demo (stackblitz) right now :) — Jeanluca Scaljeri, Sep 30 '17 at 17:51
Yes, they are, and considering that you're asking about that, that's the problem. Possible duplicate of https://stackoverflow.com/questions/43612837/error-when-unit-testing-uncaught-in-promise-syntaxerror-unexpected-token-o . Symptoms are different but the problem is same. — Estus Flask, Sep 30 '17 at 17:55
You're right, its the Headers. Your suggestion fix the issue! Thanks a lot! — Jeanluca Scaljeri, Sep 30 '17 at 18:23
You're welcome. I submitted this as the answer, guess this will help somebody else because the problem is quite annoying yet subtle. — Estus Flask, Sep 30 '17 at 18:40

score 2 · Accepted Answer · answered Sep 30 '17 at 18:34

As explained in related question, the problem is that Fetch API has same class names as the classes from @angular/http module (their design is loosely based on Fetch API).

If Angular classes (Header, Response, etc) weren't imported, global classes are used instead. This results in incorrect behaviour and irrelevant errors, because Angular classes aren't compatible with Fetch API, yet Http isn't fool-proof.

The solution is to always import relevant classes together with Http (this can be done beforehand even if they aren't used):

import { Http, Response, Headers } from '@angular/http';

A way to avoid the problem is to switch to HttpClient which is available in latest Angular 4 releases and has different API.

How to set a header with http.get

1 Answers1