Angular HttpHeaders is not setting value

Question

I am trying to set headers for one of the get request. Following is the function:

 getLeads(jwtToken: string): Observable<any>{
    const headers = new HttpHeaders();
    const authroizationToken = 'bearer '.concat(jwtToken);
    console.log(authroizationToken);          ------------------>  prints the token
    headers.append('Authorization', authroizationToken);
    console.log(headers.get('Authorization'));  ---------------------> this prints null
    var result = this.http.get<Leads>(this.getLeadsUrl, {headers});
    return result;
  }

But heades.get('Authorization') is null for some reason and I am not able to figure out why. Any help would be much appreciated.

This question has already been answered at stackoverflow.com/a/47805759/2358409 — uminder
– uminder, Commented Nov 15, 2019 at 6:41

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

Actually .append returns the new headers objects. try this it works as expected. Just make sure you assign the headers back to the variable everytime you append a new header.

   getLeads(jwtToken: string) {
    let headers = new HttpHeaders();
    const authroizationToken = 'bearer '.concat(jwtToken);
    console.log(authroizationToken);
    headers = headers.append('Authorization', authroizationToken);
    console.log(headers.get('Authorization'));
  }

Here is a working Stackblitz

Hope this helps :)

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Nov 15, 2019 at 6:47

Manish

5,0963 gold badges33 silver badges47 bronze badges

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

Comments

Joel Joseph · Accepted Answer · 2019-11-15 06:42:33Z

0

Make the following changes to your code:

getLeads(jwtToken: string): Observable<any>{
    let httpOptions = {
      headers: new HttpHeaders({ 'Authorization': `bearer ${jwtToken}` })
    };
    return  this.http.get<Leads>(this.getLeadsUrl, httpOptions);
}

answered Nov 15, 2019 at 6:42

Joel Joseph

6,1974 gold badges34 silver badges37 bronze badges

Comments

Morsh · Accepted Answer · 2019-11-15 06:51:50Z

0

The question has answers in the following threads.

https://stackoverflow.com/a/45286959/12376898

https://stackoverflow.com/a/47805759/12376898

To sum it up, the headers are immutable, hence making any changes creates a new object. Unless you reference the newly created object to the old reference, only the old object persists.

getLeads(jwtToken: string) {
let headers = new HttpHeaders();
headers.append('ANYHEADER','SOMESTRING') // will be lost
headers = headers.append('ANYHEADER','SOMESTRING') //unless you reference it again to the old reference
}

answered Nov 15, 2019 at 6:51

Morsh

3413 silver badges5 bronze badges

Comments

Adrita Sharma · Accepted Answer · 2019-11-15 06:59:57Z

0

You can use set() method of HttpHeaders:

Which sets or modifies a value for a given header in a clone of the original instance. If the header already exists, it's value is replaced with the given value in the returned object.

An example:

let header = new HttpHeaders().set(
  "Authorization",`bearer ${jwtToken}`
);

return this.http.get<Leads>(this.getLeadsUrl,  {headers:header});

edited Nov 15, 2019 at 6:59

answered Nov 15, 2019 at 6:45

Adrita Sharma

22.3k11 gold badges75 silver badges85 bronze badges

Collectives™ on Stack Overflow

Angular HttpHeaders is not setting value

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related