Read response headers from API response - Angular 5 TypeScript

Question

I m triggering a HTTP request and I m getting a valid response from it  The response also has a header X-Token that I wish to read  I m trying the below code to read the headers  however  I get null as a result  this currentlyExecuting request   this http request reqParams type  reqParams url        body  reqParams body      responseType   json       observe   response     subscribe        response  any    gt               Also tried  response headers init            const header    response headers get  X-Token            console log header           onComplete  response body                error   gt            onComplete               code  -1              message  Constants WEBSERVICE INTERNET NOT CONNNECTED                        The response of the API  when checked in Chrome inspect  shows the header is present

User · Answer

You can get headers using below code

let main_headers = {}
this.http.post(url,
  {email: this.username, password: this.password},
  {'headers' : new HttpHeaders ({'Content-Type' : 'application/json'}), 'responseType': 'text', observe:'response'})
  .subscribe(response => {
    const keys = response.headers.keys();
    let headers = keys.map(key => {
      `${key}: ${response.headers.get(key)}`
        main_headers[key] = response.headers.get(key)
       }
      );
  });

later we can get the required header form the json object.

header_list['X-Token']

User · Answer

You can get data from post response Headers in this way  Angular 6    import   HttpClient  HttpHeaders  HttpResponse   from   angular common http    const httpOptions       headers  new HttpHeaders    Content-Type    application json        observe   response  as  response      this http post link body httpOptions  subscribe  res  HttpResponse lt any gt     gt      console log res headers get  token-key-name

User · Answer

Angular 7  Service       this http post environment urlRest     my-operation  body    headers  headers  observe   response              Component      this myService myfunction   subscribe             res  HttpResponse                     console log res headers get  x-token                                  error

User · Answer

You should use the new HttpClient  You can find more information here   http    get lt any gt   url    observe   response       subscribe resp   gt        console log resp headers get  X-Token

User · Answer

In my case in the POST response I want to have the authorization header because I was having the JWT Token in it  So what I read from this post is the header I we want should be added as an Expose Header from the back-end  So what I did was added the Authorization header to my Exposed Header like this in my filter class   response addHeader  Access-Control-Expose-Headers    Authorization    response addHeader  Access-Control-Allow-Headers    Authorization  X-PINGOTHER  Origin  X-Requested-With  Content-Type  Accept  X-Custom-header    response addHeader HEADER STRING  TOKEN PREFIX   token      HEADER STRING    Authorization   And at my Angular Side  In the Component   this authenticationService login this f email value  this f password value     pipe first       subscribe       data  HttpResponse lt any gt     gt          console log data headers get  authorization                error   gt          this loading   false            At my Service Side   return this http post lt any gt  Constants BASE URL    login    username  username  password  password      observe   response  as  body       pipe map user   gt           return user

User · Answer

Try this simple code  1  Components side code  to get both body and header property  Here there s a token in body and Authorization in the header  loginUser         this userService loginTest this loginCred       subscribe res   gt            let output1   res          console log output1 body token           console log output1 headers get  Authorization               2  Service side code  sending login data in the body and observe the response in Observable any which be subscribed in the component side  loginTest loginCred  LoginParams   Observable lt any gt        const header1    Content-Type   application json         const body    JSON stringify loginCred       return this http post lt any gt  this baseURL  signin  body           headers  header1          observe   response           responseType   json

User · Answer

As Hrishikesh Kale has explained we need to pass the Access-Control-Expose-Headers   Here how we can do it in the WebAPI MVC environment   protected void Application BeginRequest                         if  HttpContext Current Request HttpMethod     OPTIONS                                   These headers are handling the  pre-flight  OPTIONS call sent by the browser                 HttpContext Current Response AddHeader  Access-Control-Allow-Methods    GET  POST  OPTIONS                    HttpContext Current Response AddHeader  Access-Control-Allow-Headers                         HttpContext Current Response AddHeader  Access-Control-Allow-Credentials    true                    HttpContext Current Response AddHeader  Access-Control-Allow-Origin    http   localhost 4200                    HttpContext Current Response AddHeader  Access-Control-Expose-Headers    TestHeaderToExpose                    HttpContext Current Response End                              Another way is we can add code as below in the webApiconfig cs file   config EnableCors new EnableCorsAttribute     headers      methods      exposedHeaders   TestHeaderToExpose     SupportsCredentials   true         We can add custom headers in the web config file as below      lt httpProtocol gt      lt customHeaders gt         lt add name  Access-Control-Expose-Headers  value  TestHeaderToExpose    gt      lt  customHeaders gt   lt  httpProtocol gt    we can create an attribute and decore the method with the attribute   Happy Coding

User · Answer

Have you exposed the X-Token from server side using access-control-expose-headers  because not all headers are allowed to be accessed from the client side  you need to expose them from the server side  Also in your frontend  you can use new HTTP module to get a full response using  observe   response   like   http    get lt any gt   url    observe   response       subscribe resp   gt        console log resp headers get  X-Token

[angular] Read response headers from API response - Angular 5 + TypeScript

Examples related to angular

Examples related to http

Examples related to typescript

Examples related to angular5