how to set custom headers with a $resource action?

Question

with $http, we can do this:

var config = { headers: { \'something\': \'anything\' } };          
$http.get(\'url/to/json\', config)
    .success(function()          


        

Answer 1

You can set dynamic one-off headers by accessing the config API object in the resource

Demo Code

angular.
.factory('Resource',['$resource',function($resource){return $resource(baseUrl+'/resource/:id', {id: '@_id'}, {
update    : {
  method  : 'POST',
  url     : baseUrl+'/resource/:id',
  headers : {
    'custom-header': function(config) {
      // access variable via config.data
      return config.data.customHeaderValue;
    }
  },
  transformRequest: function(data) {
    // you can delete the variable if you don't want it sent to the backend
    delete data['customHeaderValue'];
    // transform payload before sending
    return JSON.stringify(data);
  }
} 
});
}]);

To execute

Resource.update({},{
  customHeaderValue: setCustomHeaderValue
},
function (response) {
  // do something ...
},function(error){
  // process error
});

Answer 2

The headers object inside a resource action supports both static values for its fields, but also dynamic values returned from a function.

$resource('url/to/json', {}, {
        get: {
            method: 'GET',
            headers: { 
               'header_static': 'static_value',
               'header_dynamic': dynamicHeaderVal
            }
        }
});

function dynamicHeaderVal(requestConfig){
     // this function will be called every time the "get" action gets called
     // the result will be used as value for the header item
     // if it doesn't return a value, the key will not be present in the header
}

Answer 3

headers for $resource is available since AngularJS 1.1.1. Make sure you have correct version used.

The format is

$resource('url/to/json', {}, {headers: { 'something': 'anything' }});

[edit by zuma] The above doesn't seem right. The third parameter to $resource should be a different. This seems more correct to me:

$resource('url/to/json', {}, {
    get: {
        method: 'GET',
        headers: { 'something': 'anything' }
    }
});

Answer 4

To use "Content-Type" header you may need to specify a data body at least for versions around 1.4.7+ due to $http deleting headers without a data body that are === 'content-type'. See #10255 in 1.4.7/angular.js

I just set "data: false" to spoof it, without specifying a data body:

$resource('url/to/json', {}, {
    get: {
        method: 'GET',
        data: false,
        headers: { 'something': 'anything' }
    }
});

Answer 5

Demo Code

angular.module('Test',['ngResource'])
 .controller('corsCtrl', function ($scope, $http, MyResource) {

  $http.defaults.headers.common['test']= 'team'; //Using $http we can set header also
  MyResource.get();
})
.factory('MyResource', function($resource) {   //Services
  return $resource('url/to/json');
})

JsFiddle DEMO

see in Request Header