Angular 5 response header is missing on CORS

Question

In my angular app, I need to retrieve Location data from the response header. The server (Nginx) is configured to allow cross origin and to allow/expose location in header. I can see this in the chrome DEV console but in my angular app, I don't see any data for the header.

Access-Control-Allow-Origin: *
Access-Control-Allow-Headers:Location, Content-Type
Access-Control-Expose-Headers:Location, Content-Type

Here is my code snippet.

this.httpClient.post( url, {
        UserName: username,
        Password: password
      }
    )
      .subscribe(
        (res: Response) => {
          console.log(res.headers);
        },
        error => {console.log('Error occured::' + error);
        }
      );

console.log(res.headers) returns undefined.

What's going wrong here?

Manduro · Accepted Answer · 2018-01-06 11:58:11Z

3

The new HttpClient returns only the body by default. Should you want to retrieve anything from the response itself you can use the option observe:

  this.httpClient.post(url, {
    UserName: username,
    Password: password
  }, {
    observe: 'response'
  })
  .subscribe(res => {
    console.log(res.headers.get('Location');
  }, error => {
    console.log('Error occured::' + error);
  });

You were typecasting res to Response so TypeScript didn’t catch your error. It’s better to remove the type as in my example so it is automatically typed correctly.

answered Jan 6, 2018 at 11:58

Manduro

8438 silver badges15 bronze badges

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

6 Comments

Joe Over a year ago

Thanks for your reply. I see only 'Content-Type' in the header. Location is missing.

Manduro Over a year ago

Could you post all of the headers that are returned by the server for the preflight (OPTIONS) request and the actual request itself?

Joe Over a year ago

I see preflight response header in Network on DEV console. It returns 200. After that it returns actual response header with code 201 which has location in header. But I can't get it in Angular. I see below in console. HttpHeaders {normalizedNames: Map(0), lazyUpdate: null, lazyInit: ƒ} headers Map(1) size : (...) proto : Map [[Entries]] Array(1) lazyInit null lazyUpdate : null normalizedNames Map(1) {"content-type" => "content-type"} proto

Joe Over a year ago

Might be missing something in Nginx server configuration ?

Manduro Over a year ago

Yes, your CORS headers are probably incomplete. To check, could you post all of the headers that are returned by the server for the preflight (OPTIONS) request and the actual request itself? Be aware that Access-Control-Expose-Headers should only be returned by the actual request, not by the preflight.

|

Joe · Accepted Answer · 2018-01-09 15:28:20Z

0

OK. There were two issues. As @Manduro pointed out, need to add observe in the angular request. Another one is I missed the comma between two header types.

https://enable-cors.org/server_nginx.html

Need to add 'always' keyword in the location config file

edited Jan 9, 2018 at 15:28

answered Jan 9, 2018 at 15:11

Joe

3853 gold badges9 silver badges24 bronze badges

Collectives™ on Stack Overflow

Angular 5 response header is missing on CORS

2 Answers 2

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related