Reading response headers when using $http of Angularjs

Question

I am using $http to make an api call which is sending some custom header like X-Foo. However I can't yet figure out how to read them. Inside the $http({...}).success(function (data, status, headers, config) {...}) function, headers is a function that should give me a hash of all headers but it only shows the header content-type. Is there a way to get the response headers ?

Are you using Firefox? See http://stackoverflow.com/questions/14188662/angularjs-and-apiary-io-cant-read-any-response-headers. — Dhruv Chandna, Jun 11 '13 at 07:31
Are the requests being made to a different domain or the same domain? I tested sending the request to the same domain and I am able to see the custom headers. — Dhruv Chandna, Jun 12 '13 at 04:17
You are right, the issue was due to different domains. I could finally get the custom headers to show after I made the server to send the header Access-Control-Expose-Headers. — Joy Dutta, Jun 12 '13 at 17:58
@JoyDutta You should create an answer, so to make this question not listed under "unanswered" tab. — Ye Liu, Jul 11 '13 at 20:37
@JoyDutta, it's still under the unanswered tab, you should create an answer and accept it. — John Woodruff, Aug 05 '13 at 23:27

score 149 · Accepted Answer · answered Aug 12 '13 at 01:50

149

The custom headers will be visible in same domain. However, for the crossdomain situation, the server has to send Access-Control-Expose-Headers: X-Foo, ... header to make the custom headers visible.

answered Aug 12 '13 at 01:50

Pablo

2,540
1
18
26

3

It appears that you must specify the actual header name instead of a wildcard. `Access-Control-Expose-Headers:*` does not work, but `Access-Control-Expose-Headers:Etag` does. – Sam Barnum Jun 20 '14 at 18:00
7

this did not seem to work for me with angular's `$http` – chovy Oct 30 '14 at 22:27
5

Seems that even standard headers don't work with CORS without this workaround. Had to add this: Access-Control-Expose-Headers: Content-Disposition to make the content-disposition header visible in angularjs. – zszep Mar 05 '15 at 10:26
This is how to do it on a rails backend: http://jaketrent.com/post/expose-http-headers-in-cors/ – Nuno Silva Jul 18 '16 at 15:55
You should let angular handle the cookies. You'll need to do this on the servlet side to allow the other domain to set cookies: ` resp.setHeader("Access-Control-Allow-Credentials", "true");` – Sam Barnum Jan 05 '17 at 18:23

score 0 · Answer 2 · answered Aug 10 '17 at 07:27

Spring 4.0+ provide @CrossOrigin annotation which has following parameters

origins = list of Comma separated origin.
exposedHeaders = list ofcomma separated count custom parameters.

example

@CrossOrigin(origins = "*", exposedHeaders ="X-Total-Count")

Reading response headers when using $http of Angularjs

2 Answers2

Linked