How to access headers from a HttpClient response? (Angular / Ionic)

Question

I'm using a login endpoint that returns a bearer token as a response header, as I can see in the "Network" Chrome inspect window:

Response Headers
Access-Control-Allow-Credentials:true
Access-Control-Allow-Origin:http://localhost:8100
Authorization:Bearer eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJuZWxpby5jdXJzb3NAZ21haWwuY29tIiwiZXhwIjoxNTEyNzA3OTQ3fQ.pOR4WrqkaFXdwbeod1tNlDniFZXTeMXzKz9uU68rLXEWDAVRgWIphvx5F_VCsXDwimD8Q04JrxelkNgZMzBgXA
Cache-Control:no-cache, no-store, max-age=0, must-revalidate
Content-Length:188
(etc...)

However, when I try to print "headers" from the response using a HttpClient instance:

  authenticate(credentials) {
    let creds = JSON.stringify(credentials);
    let contentHeader = new HttpHeaders({"Content-Type": "application/json"});
    this.http.post(this.LOGIN_URL, creds, { headers: contentHeader, observe: 'response'})
      .subscribe(
        (resp) => {
          console.log("resp-ok");
          console.log(resp.headers);
        },
        (resp) => {
          console.log("resp-error");
          console.log(resp);
        }
      );
  }

I get a completely different structure:

HttpHeaders {normalizedNames: Map(0), lazyUpdate: null, lazyInit: ƒ}
lazyInit : ƒ ()
lazyUpdate : null
normalizedNames : Map(0) {}

I also tried the get(headerName) method and got null. What am I missing? How can I get that "Authorization" header from my response?

try this angular-2-get-authorization-header

Anto Antony
– Anto Antony

2017-12-07 04:57:21 +00:00
Commented Dec 7, 2017 at 4:57 — Anto Antony
– Anto Antony, Commented Dec 7, 2017 at 4:57

Chandru · Accepted Answer · 2017-12-07 06:11:39Z

5

try like this :

authenticate(credentials) {
    let creds = JSON.stringify(credentials);
    let contentHeader = new HttpHeaders({ "Content-Type": "application/json" });
    this.http.post(this.LOGIN_URL, creds, { headers: contentHeader, observe: 'response' })
        .subscribe(
        (resp) => {
            let header: HttpHeaders = resp.headers;
            console.log(header.get('Authorization'))
        },
        (resp) => {
            console.log("resp-error");
            console.log(resp);
        }
        );
}

edited Dec 7, 2017 at 6:11

answered Dec 7, 2017 at 5:07

Chandru

11.2k6 gold badges43 silver badges54 bronze badges

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

3 Comments

Estus Flask Over a year ago

HttpHeaders, not Headers

Bhaumik Sathvara Over a year ago

Type cast into HttpHeaders worked for me. Thanks !!

Ali Haider Over a year ago

The main trick was to add observe: 'response' with the headers in the request.

brijmcq · Accepted Answer · 2017-12-07 06:33:55Z

4

You are almost there.

The reason it is not working is because you didn't use the .get function of the headers.

Change this

 console.log(resp.headers);

To this

 console.log(resp.headers.get('Authorization'))

More Info:

Official doc here

answered Dec 7, 2017 at 6:33

brijmcq

3,4182 gold badges19 silver badges34 bronze badges

Comments

Manit · Accepted Answer · 2017-12-07 09:45:46Z

2

Are you sure you are adding it as a part of the response? You need to add the header in the response:

public void methodJava(HttpServletResponse response){
  ...
 response.addHeader("access-control-expose-headers", "Authorization");
}

And then you can do what you have been trying. I think headers.get('Authorization') should give you the desired value

answered Dec 7, 2017 at 9:45

Manit

1,10511 silver badges18 bronze badges

1 Comment

brijmcq Over a year ago

Just wondering why this is the accepted answer? This is java code.

Yan Guo · Accepted Answer · 2023-11-10 02:56:21Z

0

I recently encountered this issue as well. After some investigation, I found that it seemed to be a backend issue that required adding "Access-Control-Expose-Headers" to the response header.

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Access-Control-Expose-Headers

answered Nov 10, 2023 at 2:56

Yan Guo

1

Collectives™ on Stack Overflow

How to access headers from a HttpClient response? (Angular / Ionic)

4 Answers 4

3 Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related