AngularJS: Unable to get responseHeaders after a $resource $save

Question

I'm performing the following $save which calls my angularJS $resource and POSTs to my API. I'm able to debug into my success callback handler and the object is actually created in my API.

myObj.$save({}, function (value, responseHeaders) {
    myObj.someSuccessFunction();
}, function (responseText) {
    myObj.someFailureFunction();
});

I'm unable to retrieve anything from the "responseHeaders" param. "responseHeaders()" returns an empty object. I would like to pull the "location" response header like this: responseHeaders("Location").

It's worth noting that the Response is filled in when debugging in chrome. The "responseHeaders" object is failing to be populated for some reason.

How can we get these responseHeaders?

Thanks!

Answer 1

Could it be a CORS issue? If you are making the call across a domain, be sure to include cors.exposed.headers in the pre-flight OPTIONS call.

Answer 2

If it is a cross domain call you have to add the following header in your response headers:

Access-Control-Expose-Headers: Location

With this, the browser is capable to expose your customs headers an read it angular.

Answer 3

I have the same issue with spring security 4.2 CORS filter and AngularJS. My client app built using Angular JS not able to read customer authentication token from response header sent by spring rest api.

I could resolve the issue by exposing below headers.

config.addExposedHeader("Origin");
config.addExposedHeader("X-Requested-With");
config.addExposedHeader("X-AUTH-TOKEN");
config.addExposedHeader("Content-Type");
config.addExposedHeader("Accept");
config.addExposedHeader("Authorization");
config.addExposedHeader("Location");

After the above fix. My Angular code able to read headers.