AngularJS $ resource save（）导致HTTP错误415（不支持的媒体类型）

Question

I am using Angular 1.2-RC2 (also tried 1.0.8 and 1.1.x) and the ngResource module. The backend is a Spring WebMVC application.

angular.module("dox", ['ngResource'])

.controller('SettingsController', function ($scope, Settings) {
    $scope.settings = Settings.query();

    $scope.save = function () {
        Settings.save();
    };
})

.factory('Settings', function ($resource) {
    return $resource('/api/v1/settings/:settingId', {settingId: '@id'}, {
        'save': {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            }
        }
    });
});

Whenever the save() method on the Settings class gets called the frontend receives a HTTP 415 (Unsupported media type). The reason is that AngularJS send the POST request using the following content type:

Content type: text/plain;charset=UTF-8

but the backend expects

Content type: application/json;charset=UTF-8

According the API docs it should be possible to override the header but my settings are somehow ignored. I seems that this is a common problem and as a workaround there are many recommendation to use $http.post instead of $resource.

Can you give me any hint how to solve this content type problem using the $resource service?

Please find the backend controller code here .

Answer 1

First, you're overriding a built-in $save method, so you can just omit the save: part (see source code ). If you do define additional HTTP methods that aren't built-in, you can update the $httpProvider like so (this is to add the patch method):

.config(['$httpProvider', function($httpProvider) {
    $httpProvider.defaults.headers.patch = {
         'Content-Type': 'application/json;charset=utf-8'
    }
}]);

Answer 2

Kevin Stone pushed me to the right direction. Thank you!

Since query() returns an array and save() is meant to save only one item of that array at the same time I had to reimplement the save() stuff differently .

$scope.save = function () {    
   angular.forEach($scope.settings, function (value, key) {                    
      value.$save();
   });
};

Done! Again thank you for your hints and help