How to read Http response header in angular

Question

This is my angular service class code.I have called restful web service in this class ,response is coming . Response header has JWT web token I want to read response header and take JWT web token in this authUser service function. how to do it?

import { Injectable } from '@angular/core';
import {ResponseBeanModule} from '../../module/responsebean/responsebean.module';
import { Http, Headers, Response } from '@angular/http';


@Injectable({
  providedIn: 'root'
})
export class AuthenticationService {
  constructor(private http: Http) { this._prepare()}
  private userUrl = 'http://192.168.1.152:8080/api/user/';

  endpointUrl: String;
  responseBeanModule: ResponseBeanModule = new ResponseBeanModule();
  options: any;
  headers: any;

  _prepare () {
    this.endpointUrl = this.userUrl;
    this.headers = new Headers();
    this.headers.set('Content-Type', 'application/json');
    this.options = {
      headers: this.headers,
      observe: 'body'
    };
  }



  public authUser(loginBean): Promise<ResponseBeanModule> {
    return new Promise((resolve, reject) => {
      this.http.post(this.userUrl, loginBean, this.options).subscribe(
        (data) => {
         alert(JSON.stringify(data));
         this.responseBeanModule = JSON.parse(data['_body'])
          return resolve( this.responseBeanModule );
        },
        (err) => {
          return reject(err);
        }
      );
    });

  }

}

This looks a bad way. First you should correct the way you are calling service. For starters, use httpClient, use observable instead of promise, etc — Akshay
– Akshay, Commented Oct 9, 2018 at 10:52
Please take a look at the official docs. angular.io/guide/http and use HttpClient. Http has been deprecated for ages. Also I see no reason to use promises. When you have that part done, then take a look at how you can read the headers from the same link as above (when using HttpClient, NOT Http). Here the exact segment: angular.io/guide/http#reading-the-full-response For future, please read the documentation first :) — AVJT82
– AVJT82, Commented Oct 9, 2018 at 11:17
I notice you're doing a post. I would also like to post and find the response headers in the object. I attempted to use the observe options using 'response' in an HttpClient.post() function call -- it sort of worked but ... I logged an issue about this on github, github.com/angular/angular/issues/44127 so I hope there's some traction on this answer or even a bug fix! — activedecay
– activedecay, Commented Nov 9, 2021 at 23:12

Kristof Neirynck · Accepted Answer · 2024-12-28 19:20:13Z

0

If your request is to a different domainthen the Cross-origin resource sharing (aka CORS) rules apply. You may need to add Access-Control-Expose-Headers on your server. See Why is Access-Control-Expose-Headers needed?

answered Dec 28, 2024 at 19:20

Kristof Neirynck

4,2132 gold badges38 silver badges52 bronze badges

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

Comments

activedecay · Accepted Answer · 2025-01-24 23:35:41Z

Either this is a broken feature of Angular's HttpClient, or they never intended for you to read more headers than just the Content-Type and Content-Length -- I can only read those headers using either HTTP POST or HTTP GET:

  login(username = "", password = "") {
    return this.httpClient
      .post(`${environment.apiLocation}redfish/v1/SessionService/Sessions`,
        { username, password },
        {observe: 'response'})
      .pipe(
        map(response => {
          const keys = response.headers.keys();
          let headers = keys.map(key =>
            `${key}: ${response.headers.get(key)}`);
          this.logger.log('response headers', headers);

as mentioned in my bug report here: https://github.com/angular/angular/issues/44127

I think it's possibly related to the server not responding with the right headers to allow Angular to see it https://stackoverflow.com/a/52444472/823282

yep. it was a CORS issue. Access-Control-Expose-Headers should have been set first to inform the browser that it's OK to read the headers.

Collectives™ on Stack Overflow

How to read Http response header in angular

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related