CODEWITHSUNDEEP
angularionic-frameworkhttpclient
Nelio Alves
Nelio Alves

Reputation: 1371

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

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?

Upvotes: 5

Views: 9482

Answers (4)

Yan Guo
Yan Guo

Reputation: 1

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

Upvotes: 0

Manit
Manit

Reputation: 1105

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

Upvotes: 2

brijmcq
brijmcq

Reputation: 3418

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

Upvotes: 4

Chandru
Chandru

Reputation: 11184

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

Upvotes: 5

Related Questions