Using .pipe() to retrieve response headers in Angular

Question

I have a method that gets a HTTP response from an API. The API I'm calling has now changed and put the string that I need in the HTTP Header.

Currently this code does work and does not come back with an error:

// Create a Visitor JWT Token
  createVisitor() {
    // Create the visitor to send to API
    // TODO: Capture the params of the URL and not the full URL
    this.visitor = {
      BrandCode: 'honey',
      QueryString: 'example=qstring'
    };

    // Set Token as Session & Return a Success/Fail
    return this.http.post(this.api + this.controller + 'createvisitor', this.visitor).pipe(
      map((response: any) => {
        console.log(response);
      })
    );
  }

However when I look at the log in the console it simply outputs the response as a string with no headers. The subscribe part of the method I'm using in a guard:

// Create the token...
this.visitorService.createVisitor().subscribe(next => {
}, error => {
  console.log('Create Token Error');
});

Will I need to move the local storage from the .pipe() method to the subscribe part of the method, or is there anyway I can do this in the .pipe()?

Not quite - I want to avoid setting the session in subscribe if I can and I want to try and do it from the .pipe() but not sure if this is even possible? — Web Develop Wolf, Jul 20 '20 at 11:24
x is only coming out as a string though - I need a header from the response not the body — Web Develop Wolf, Jul 20 '20 at 11:31
Anything you do in a subscribe you can do in a pipe. Your problem is angular does not show the header unless you pass {observe: 'response'} per the suggested question from @enno.void. Also if the header is a non CORS safe header you will run into issues as well unless you add it to Access-Control-Expose-Headers on the server side https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Expose-Headers — cjd82187, Jul 20 '20 at 11:33
@cjd82187 I see what you're saying - so looks like part of the problem is that the Auth header isn't exposed because I can get the other back - thanks! — Web Develop Wolf, Jul 20 '20 at 11:43

score 2 · Accepted Answer · edited Jul 20 '20 at 11:44

2

You can do your local storage code inside the pipe as below.

     createVisitor() {
        // Create the visitor to send to API
        // TODO: Capture the params of the URL and not the full URL
        this.visitor = {
          BrandCode: 'honey',
          QueryString: 'example=qstring'
        };
    
        // Set Token as Session & Return a Success/Fail
        return this.http.post(this.api + this.controller + 'createvisitor', this.visitor, {observe: 'response'}).pipe(
          map((response: any) => {
            console.log(response.headers.keys());// all header names
 console.log(response.body); // response content

          })
        );
      }

edited Jul 20 '20 at 11:44

Web Develop Wolf

5,996
12
52
101

answered Jul 20 '20 at 11:27

surendra kumar

1,686
11
15

I need a header not the body 'response' only returns the body – Web Develop Wolf Jul 20 '20 at 11:31
I have edited the answer, please check if this works for u. – surendra kumar Jul 20 '20 at 11:41

Using .pipe() to retrieve response headers in Angular

1 Answers1

Linked