Cant get headers of response in angular 5

Question

I make a post request to a server which responds with two headers that are important for the client: username and access-token. The Network Tab of the Chrome debug tool displays the following data for the response:

I also log the response on the console:

Here the headers are not present - why is this? My code for logging:

this.usersService.registerNewUser(firstName, lastName, email, username, birthday, password).subscribe(
          res => {
            console.log(res);
          },
          err => {
            console.log("Error" + JSON.stringify(err));
          }
        );

I wanted to access the header username by res.headers.username.

My request looks like this:

this.http.post<string>(
      "http://localhost:2002/users",
      JSON.stringify({
        firstName: firstName,
        lastName: lastName,
        email: email,
        username: username,
        birthday: birthday,
        password: password
      }),
      {
        observe: "response"
      }
    );

What have I done wrong?

Possible duplicate of [Read response headers from API response - Angular 5 + TypeScript](https://stackoverflow.com/questions/48184107/read-response-headers-from-api-response-angular-5-typescript) — SiddAjmera, Aug 22 '18 at 16:33
@SiddharthAjmera It is not a duplicate of this! Look at my request that I just added in the question - I set the "observe" field to "response"! — TheProgrammer, Aug 22 '18 at 16:37
You could try sending a `Access-Control-Expose-Headers` response header from the server — user184994, Aug 22 '18 at 16:45
@user184994 What should the value for "Access-Control-Expose-Headers" be? — TheProgrammer, Aug 22 '18 at 16:46
A comma separated list of the headers you want to expose, i.e. `access-token, username` — user184994, Aug 22 '18 at 16:47
@user184994 Very nice - this works, thanks a lot! Could you please post this as an answer so that I can mark it as solution? — TheProgrammer, Aug 22 '18 at 16:49

score 17 · Accepted Answer · answered Aug 22 '18 at 16:52

The front end will not be able to access that header unless the back end allows it.

In order to do so, you need to send a Access-Control-Expose-Headers header from the backend, and the value should be a comma separated list of the values you want to expose, i.e. access-token, username

score 2 · Answer 2 · answered Jul 22 '20 at 15:37

Just want to give additional info. Yesterday spent on this few hours and was getting crazy.

Once you have access-control-expose-headers from backend. And if you just printing response object like this console.log(res) or console.log(res.headers) it will not show the headers because Angular uses Lazy-loading. You need to explicitly say which header you need console.log(res.headers.get('your-header'))

score 1 · Answer 3 · answered Aug 22 '18 at 16:37

1

normally the response is just the 'body', while you want the 'headers'. on the res you could use:

this.header = res.headers.get('header-name');

answered Aug 22 '18 at 16:37

dhoffens

147
1
11

But this solves another problem after the headers are received in the frontend because I cannot read the property directly by headers.field - I have to use get! – TheProgrammer Aug 22 '18 at 17:02

Cant get headers of response in angular 5

3 Answers3

Linked