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
– user184994, Commented Aug 23, 2018 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
– user184994, Commented Aug 23, 2018 at 15:53

Sajeetharan · Accepted Answer · 2018-08-23 15:41:40Z

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, 2018 at 15:41

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

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

2 Comments

DarkW1nter Over a year ago

thanks, then the call should still be: getStuff(){ return this.http.get('myurl/tables/stuff', {headers}) } ?

Kapil Soni Over a year ago

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?

Ayoub k · Accepted Answer · 2018-08-23 15:53:10Z

10

Angular 6 format:

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

answered Aug 23, 2018 at 15:53

Ayoub k

9,03811 gold badges43 silver badges66 bronze badges

2 Comments

Ayoub k Over a year ago

try to change 'Accept': 'application/json' to 'Content-Type': 'application/json'

WasiF Over a year ago

short and simple method to set headers :)

CostaIvo · Accepted Answer · 2018-08-23 15:52:18Z

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, 2018 at 15:52

answered Aug 23, 2018 at 15:41

CostaIvo

1,29114 silver badges19 bronze badges

3 Comments

CostaIvo Over a year ago

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

DarkW1nter Over a year ago

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.

user184994 Over a year ago

If it's a GET request, there will be no content, so Content-Type won't matter

spec · Accepted Answer · 2019-07-24 15:25:10Z

1

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});

answered Jul 24, 2019 at 15:25

spec

4495 silver badges4 bronze badges

Comments

Johnyoat · Accepted Answer · 2018-08-30 15:02:50Z

0

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

answered Aug 30, 2018 at 15:02

Johnyoat

4565 silver badges14 bronze badges

Comments

faizan shafiq · Accepted Answer · 2019-01-09 05:33:27Z

0

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

answered Jan 9, 2019 at 5:33

faizan shafiq

318 bronze badges

Comments

Akil Makda · Accepted Answer · 2018-10-31 08:25:51Z

-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, 2018 at 8:25

answered Aug 25, 2018 at 12:03

Akil Makda

4411 gold badge4 silver badges11 bronze badges

4 Comments

Jhourlad Estrella Over a year ago

At least learn to format your OWN codes before trying to help others.

Akil Makda Over a year ago

@JhourladEstrella thank you for advice. I will take care of next time.

Andrew Gray Over a year ago

Downvoted, because the syntax for adding a header is inaccurate. The correct method is append, not set.

Akil Makda Over a year ago

I give this for Angular 6. [angular.io/api/common/http/HttpHeaders]

Collectives™ on Stack Overflow

Adding http headers in Angular 6

7 Answers 7

2 Comments

2 Comments

3 Comments

Comments

Comments

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

2 Comments

2 Comments

3 Comments

Comments

Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related