Adding http headers in Angular 6

Question

Can anyone tell me if this is the correct way to add headers to http requests in Angular 6?

When I make the call via SwaggerUI, I can see the headers should be:

url -X GET --header 'Accept: application/json' --header 'zumo-api-version: 2.0.0' 'https://myurl/tables/stuff'

so I have added the following:

let headers: HttpHeaders = new HttpHeaders();
headers = headers.append('HttpHeader1', 'Accept:application/json');
headers = headers.append('HttpHeader2', 'zumo-api-version:2.0.0');

And then the call:

getStuff(){
    return this.http.get('https://myurl/tables/stuff', {headers})
  }

There is no failure but nothing is returned, and I know that there should be.

thanks

UPDATE

Have just noticed that the url in my call is actually https not http, would that make any difference?

getStuff(){
        return this.https.get('https://myurl/tables/stuff', {headers})
      }

Where you've got `HttpHeader1` should actually be the header name, i.e. `Accept`, and where you've got `Accept:application/json` should be the value, i.e. `application/json`, so what you actually want is `headers.append('Accept', 'application/json');` — user184994, Aug 23 '18 at 15:40
Make sure you call `subscribe` on your HTTP call as well. Observables are lazy, so it will only make the HTTP call once something has subscribed — user184994, Aug 23 '18 at 15:53

score 32 · Accepted Answer · answered Aug 23 '18 at 15:41

32

The correct way to set headers is

let headers: HttpHeaders = new HttpHeaders();
headers = headers.append('Accept', 'application/json');
headers = headers.append('zumo-api-version', '2.0.0');

answered Aug 23 '18 at 15:41

Sajeetharan

216,225
63
350
396

2

thanks, then the call should still be: getStuff(){ return this.http.get('https://myurl/tables/stuff', {headers}) } ? – DarkW1nter Aug 24 '18 at 09:22
sir i tried ur code but i got ERROR TypeError: CreateListFromArrayLike called on non-object in the console can u tell me how to fix? – Kapil Soni Mar 31 '20 at 12:04

score 10 · Answer 2 · answered Aug 23 '18 at 15:53

10

Angular 6 format:

let headers = new HttpHeaders({
    'Accept': 'application/json',
    'zumo-api-version': '2.0.0'
});

answered Aug 23 '18 at 15:53

Ayoub k

7,788
9
34
57

1

try to change 'Accept': 'application/json' to 'Content-Type': 'application/json' – Ayoub k Aug 24 '18 at 08:49
short and simple method to set headers :) – WasiF Mar 27 '19 at 06:59

CostaIvo · Answer 3 · 2018-08-23T15:52:18.120

3

The correct format to set the headers would be as shown below.

let headers: HttpHeaders = new HttpHeaders();
headers = headers.append('Accept', 'application/json');
headers = headers.append('zumo-api-version', '2.0.0');

url -X GET --header 'Accept: application/json' --header 'zumo-api-version: 2.0.0' 'https://myurl/tables/stuff'

In the above request the name of the header keys is Accept & zumo-api-version , the text preceding the :
Headers are basically set as key/value pairs

edited Aug 23 '18 at 15:52

answered Aug 23 '18 at 15:41

CostaIvo

1,029
13
19

let options = new RequestOptions({ headers: headers }); return this._http .get(this._url,options) make sure you make the call to get request using above statement, by passing the headers in request call – CostaIvo Aug 23 '18 at 15:55
same thing - no data, and yes I get it returned in swagger. Think I'm missing the subscribe though, I'll test that in the morning, home time now. – DarkW1nter Aug 23 '18 at 15:58
If it's a GET request, there will be no content, so Content-Type won't matter – user184994 Aug 23 '18 at 15:58

score 1 · Answer 4 · answered Jul 24 '19 at 15:25

In angular 6+

declaration zone:

httpOptionsNoAuth : any;

initialization:

constructor(){
    this.httpOptionsNoAuth = {
        headers: new HttpHeaders().set('No-Auth', 'true')
    };
}

usage:

return this._http.get<any>(`${url}`, { headers: this.httpOptionsNoAuth.headers});

score 0 · Answer 5 · answered Aug 30 '18 at 15:02

You're getting nothing in return because you're not subscribing to that event. add .subcribe to that function where ever you're calling it eg

getStuff().subscribe(data=>{ console.log(data); } )

so the data you're subscribing to contains all the response and everything you need to know about that call.

You can read more from here https://angular.io/guide/http

score 0 · Answer 6 · answered Jan 09 '19 at 05:33

I have done it like this in my code

httpOptions={ headers: new HttpHeaders({ 'Content-Type': 'application/json'})};
 this.httpOptions.headers = this.httpOptions.headers.append('Token', this.Token);

And then in my http.get call, I have done this:

return this.http.get<JSON>(this.API_ADDRESS+'/api/RemoveEmployee/'+id,this.httpOptions

Akil Makda · Answer 7 · 2018-10-31T08:25:51.207

-3

Try below code that might help you.

let headers = new HttpHeaders().set('Accept': 'application/json').set('zumo-api-version': '2.0.0')

edited Oct 31 '18 at 08:25

answered Aug 25 '18 at 12:03

Akil Makda

373
1
3
9

At least learn to format your OWN codes before trying to help others. – Jhourlad Estrella Oct 30 '18 at 05:36
1

@JhourladEstrella thank you for advice. I will take care of next time. – Akil Makda Oct 31 '18 at 08:58
Downvoted, because the syntax for adding a header is inaccurate. The correct method is `append`, not `set`. – Andrew Gray Jan 23 '19 at 21:47
1

I give this for Angular 6. [https://angular.io/api/common/http/HttpHeaders] – Akil Makda Jan 24 '19 at 04:04

Adding http headers in Angular 6

7 Answers7

Linked