Accessing custom http response headers in angularjs

Question

I am trying to access the header \'error-detail\' as you can see in the browser networ

Answer 1

I think you are on the right track. To have access to custom headers, your server needs to set this special Access-Control-Expose-Headers header, otherwise your browser will only allow access to 6 predefined header values as listed in the Mozilla docs.

In your screenshot such a header is not present in the response. You should have a look at the backend for this cors header to also be present in the response.

Answer 2

This is a CORS Issue. Because this is a cross-origin request, the browser is hiding most ot the headers. The server needs to include a Access-Control-Expose-Headers header in its response.

The Access-Control-Expose-Headers1 response header indicates which headers can be exposed as part of the response by listing their names.

By default, only the 6 simple response headers are exposed:

• Cache-Control
• Content-Language
• Content-Type
• Expires
• Last-Modified
• Pragma

If you want clients to be able to access other headers, you have to list them using the Access-Control-Expose-Headers header.

For more information, see MDN HTTP Header -- Access-Control-Expose-Headers