How to access response headers using $resource in Angular?

Question

I basically call get requests like so:

var resource = $resource('/api/v1/categories/:id')

resource.get({id: 1}).$promise.then(function(data){
  console.log(data)
})

This works fine.. but how do I get the response headers?

score 42 · Accepted Answer · answered Feb 09 '15 at 09:28

42

You could use the transformResponse action defined here this would allow you add the headers

$resource('/', {}, {
    get: {
        method: 'GET',
        transformResponse: function(data, headers){
            response = {}
            response.data = data;
            response.headers = headers();
            return response;
        }
    }

See a working example here JSFiddle

answered Feb 09 '15 at 09:28

Martin

2,411
11
28
30

doesn't work with newer versions. Function that transforms response should return deserialized data now – EvAlex May 17 '16 at 12:12
Simply access the `headersGetter` function that gets passed as a second parameter after your data. See the answer below or here: https://docs.angularjs.org/api/ngResource/service/$resource – Sean Jun 19 '16 at 19:05
Access a specific header like this: headers('Server') – Software Prophets Aug 04 '16 at 14:09

vinesh · Answer 2 · 2017-01-18T19:59:09.973

18

@Martin's answer works for same domain requests. So I would like to add to his answer that if you are using cross domain requests, you will have to add another header with Access-Control-Expose-Headers: X-Blah, X-Bla along with the Access-Control-Allow-Origin:* header.

where X-Blah and X-Bla are custom headers.

Also you do not need to use transform request to get the headers. You may use this code:

var resource = $resource('/api/v1/categories/:id')

resource.get({id: 1}, function(data, headersFun){
  console.log(data, headersFun());
})

See this fiddle. Hope this helps !!!

edited Jan 18 '17 at 19:59

answered Jan 25 '16 at 13:50

vinesh

4,745
6
41
45

I think this is more convenient than the current accepted answer (At least in 2016). Angular automatically gives you header values with the 2nd parameter (Do not forget to use paranthesis as this is a function, not a direct object). – MÇT Apr 23 '16 at 15:03
It's less important about the cross-domain and more relevant about the headers function being a second param in the `then` function - I almost missed this because of your cross-domain info! – Sean Jun 19 '16 at 19:03
2

There is a subtle but hugely important difference between what you wrote here and in the fiddle. The fiddle is using the `get` call with callbacks for success and error, and in that case the headersFun exists. But handling the response via `$promise.then` as you wrote above has no such second parameter - `headersFun` is undefined. – Danny Jan 18 '17 at 15:35
1

@Danny improved the answer as per your suggestion. – vinesh Jan 18 '17 at 20:01

score 6 · Answer 3 · answered Oct 19 '16 at 11:46

Old question, but i think it's worth mentioning for the future reference. There is 'official' solution for this in angular documentation:

It's worth noting that the success callback for get, query and other methods gets passed in the response that came from the server as well as $http header getter function, so one could rewrite the above example and get access to http headers as:

var User = $resource('/user/:userId', {userId:'@id'});

var users = User.query({}, function(users, responseHeaders){
  // ...
  console.log(responseHeaders('x-app-pagination-current-page'));
});

(code from docs slightly updated for clarity)

For CORS requests, exposing headers as mentioned in other answers is required.

How to access response headers using $resource in Angular?

3 Answers3