How to get the response header of a HttpClient.Post request in Angular

Question

I am using angular 7 and i need to get "Response Header" from the given API in service file without using "subscribe". please help me in this

i have tried by using many google answers but none of them worked.I am not able use subscribe in service.ts file because i am getting error in component.ts file as we can t use subscribe two times

login(email: string, password: string ) {
this.email = email;
this.password = password;


return this.http.post<any>(`this.url/auth/login`, { email, password})
.pipe(map(user => {
var currentuser:any = { user: user.user, token: user.token};
if (currentuser && user.token) {
localStorage.setItem('currentUser', JSON.stringify(currentuser));
this.currentUserSubject.next(currentuser);
 }
return user;
 }));

}

Expected result :

need to get ""response header for the above api .. Note : "Response header" means -- content length , token ,Content-Type , Etag, etcc

Actual result :

I am getting only the body for this not headers

Coverture

What’s your need for response-headers? It seems you’re mapping the response, before trying to get the headers. – Dora

Maybe this tutorial for interceptors can help you: Interception in Angular 7 – Dora

i need to get token from headers so was trying to get but could not.Please help – Coverture

Answer 1

My understanding is you would like :

• to send post request and retrieve data
• but also have access to headers of server response.

If that's true, you should consider to invoke HttpClient.post() with httpOptions = { observe: 'response' }. With this, HttpClient.post() will return an Observable of typed HttpResponse rather than just the JSON data.

Recommended read on Angular Official docs

Your code should looks like :

this.http.post<HttpResponse<User>>(`${this.url}/auth/login`, { email, password }, 
  { observe: 'response' }).subscribe(response => {

  ...
  response.headers.keys(); // all header names
  ...
  response.body // response content
  ...

});

UPDATED

or inside a service method, which will retrieve a User model only, but will do something with response details, for instance: (may have typos)

getUserFromLogin(email: string, password: string): Observable<User> {
  return this.http.post<HttpResponse<User>>(`${this.url}/auth/login`, 
    { email, password }, { observe: 'response' }).pipe(
      map(response => {

        ...
        response.headers.keys(); // all header names
        ...
        response.body // response content
        ...

        return response.body;
      })
  )
)

Derayne

Hi Therry Falvo, We can get result on this and thankyou for your answer. But i could not use subscribe here is service.ts file as its throwing error in component.ts file when i call this method api.Please suggest me some other way – Coverture

Apply the same approach inside a map operator, and return only the body for instance. I updated my answer to give you an example. – Derayne

Thanks, this is what I needed !! – Principled

Any idea for array buffer? – Pellmell