AngularJS $resource save() causes HTTP Error 415 (Unsupported Media Type)

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.

Kevin Stone · Accepted Answer · 2013-10-08 07:45:59Z

2

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'
    }
}]);

answered Oct 8, 2013 at 7:45

Kevin Stone

9,01143 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

saw303 Over a year ago

Thank you for your answer. The reason why I override the save method is that when I used the standard configuration (which looks correct and is what I wanted) also sends the request as text/plain instead of application/json. Is it a problem to call save on an array since Settings is an array (retrieved by query()) or why does AngularJS decide to use text/plain?

saw303 · Accepted Answer · 2013-10-09 07:15:54Z

0

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

edited Oct 9, 2013 at 7:15

answered Oct 8, 2013 at 15:13

saw303

9,3688 gold badges59 silver badges104 bronze badges

1 Comment

Kevin Stone Over a year ago

Any reason you're not using the instance method and calling value.$save() instead of the class-level Settings.save() inside the forEach loop? I think it would help you avoid these issues if you treat these resource instances as objects instead of just data containers.

Collectives™ on Stack Overflow

AngularJS $resource save() causes HTTP Error 415 (Unsupported Media Type)

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related