I am trying to write an AngularJS resource module that will post some data to the server. The default content-type appears to be "application/xml". I am trying to override the content-type to "application/x-www-form-urlencoded". When doing a normal $http.post() I can set the content-type and when I check in Firebug, I can see it set correctly. When I use the resource's POST method, I cannot get the content-type to be changed from the default. I think that I am doing it according to how the documentation describes.

/

var myApp = angular.module('myApp',['myResource']);

angular.module('myResource', ['ngResource']).factory('myResource', function($resource){
   return $resource('/echo/json',{},{
      add:{ method:'POST', params:{ foo:'1' }, headers:{'Content-Type':'application/x-www-form-urlencoded'} }
   });
});

function MyCtrl($scope,$http,myResource) {
   $scope.click = function() {

      //This will make an ajax call with a content-type of application/xml    
      myResource.add();

      //this will make an ajax call with a content-type of application/x-www-form-urlencoded
      $http.post('/echo/json','foo=1',{'headers':{'Content-Type':'application/x-www-form-urlencoded'}});

   }
}​

Any ideas or examples on how to get an AngularJS resource to post with a different content-type would be much appreciated.

I am trying to write an AngularJS resource module that will post some data to the server. The default content-type appears to be "application/xml". I am trying to override the content-type to "application/x-www-form-urlencoded". When doing a normal $http.post() I can set the content-type and when I check in Firebug, I can see it set correctly. When I use the resource's POST method, I cannot get the content-type to be changed from the default. I think that I am doing it according to how the documentation describes.

http://jsfiddle/vBsUH/3/

var myApp = angular.module('myApp',['myResource']);

angular.module('myResource', ['ngResource']).factory('myResource', function($resource){
   return $resource('/echo/json',{},{
      add:{ method:'POST', params:{ foo:'1' }, headers:{'Content-Type':'application/x-www-form-urlencoded'} }
   });
});

function MyCtrl($scope,$http,myResource) {
   $scope.click = function() {

      //This will make an ajax call with a content-type of application/xml    
      myResource.add();

      //this will make an ajax call with a content-type of application/x-www-form-urlencoded
      $http.post('/echo/json','foo=1',{'headers':{'Content-Type':'application/x-www-form-urlencoded'}});

   }
}​

Any ideas or examples on how to get an AngularJS resource to post with a different content-type would be much appreciated.

• javascript
• angularjs

1 Answer 1

Jake, yesterday I provided some info to a similar question: https://stackoverflow./a/12876784/1367284

Pasting that response below:

While the development docs (as of 12 Oct) show that overriding headers is possible in a $resource, it hasn't yet been released (v1.0.2 or v1.1.0). The feature is in the v1.0.x and master branches, however. In order to get at that feature, you might consider building from the v1.0.x branch for now.

How to build: http://docs.angularjs/#H1_4

Alternatively, you could pull from the snapshot build: http://code.angularjs/snapshot/

Looks like this feature will be in the next release.