AngularJS: Can't send a PUT request with $resource

Question

This is my first question so don't burn me at stake.

I have an API that I'm sending GET,POST,PUT,DELETE requests to using $resource. I have managed to make a GET and a POST request that do what they're supposed to, but whenever I try to send a PUT request I get a 404 error and an OPTIONS method sent instead.

Basically, my PUT request should be sent with same parameters that the POST has. When I send the seemingly same request over Postman extension, it works fine. I just have no idea how to replicate it via $resource.

plunker with issue: http://plnkr.co/edit/gJV4otD0XGKoQWOq3PdK (it's much more clear on plunkr than on this pasted piece of code by the way)

services.js

angular.module('starter.services',['ngResource']).factory('RESTCalls', function ($resource) {
return $resource('http://api.artistappz.com/api/v1/news/:urlkey/:id/x-app-id/3865f620590f40d493ec8d900b4c24d3/', null, {
    update: {
        method:'PUT'
    },
    save: {
        method:'POST',
        headers:{
            'Content-Type':'application/x-www-form-urlencoded'
        }
    }
});

});

controllers.js

angular.module('starter.controllers',[]).controller('HomeController', ['$scope','RESTCalls', function ($scope, RESTCalls) {
$scope.RESTGet = function() {
    RESTCalls.get(function (response) {
        console.log(response);
    });
};

$scope.RESTPost = function() {
    RESTCalls.save('user_id=76A5FC91E4684FA1ACB2FDA645FD5B2C&title=dejan seme ti jebem krvavo&body=dejan&url=dejanurl',function(response) {
        console.log('SUCCESS:');
        console.log(response);
    },function (responseerr) {
        console.log('ERROR:');
        console.log(responseerr);
    });
};

$scope.RESTPut = function() {           
    ///item/84173EF7D6FD4469B411057C72F53DE2
    RESTCalls.get({urlkey:'item',id:'84173EF7D6FD4469B411057C72F53DE2'},function (response) {
        var tempobject = response.data.news['84173EF7D6FD4469B411057C72F53DE2'];
        tempobject.user_id = '76A5FC91E4684FA1ACB2FDA645FD5B2C';

        RESTCalls.update({urlkey:'item',id:'84173EF7D6FD4469B411057C72F53DE2'},tempobject);
    });
};}]);

postman PUT request http://i.stack.imgur.com/zLMUA.jpg

:-) "'user_id=76A5FC91E4684FA1ACB2FDA645FD5B2C&title=dejan seme ti jebem krvavo&body=dejan&url=dejanurl'" o da... Poznato... :D — Marko Šutija, Aug 27 '15 at 17:10

score 1 · Accepted Answer · edited May 23 '17 at 11:45

It's about 'HTTP access control'. Cause you request a resource to the different domain server. You can perform GET&POST request, but 'PUT' is different.

The browser side will send 'OPTIONS' request first. And then, upon "approval" from the server, sending the actual request with the actual HTTP request method.

If you inspect the network request in your plunker, you will notice it's 'OPTIONS' request instead of 'PUT'.

Here is MDN document for OPTIONS request.

Here is a relative issue.

score 1 · Answer 2 · answered Jun 26 '15 at 10:24

To resolve this problem you can customize $resouce method in you service:

Consider the following example:

Service:

angular.module('myApp')
.factory('ProductService', ['$resource',
    function ($resource) {
        return $resource('/products', {}, {
            query: { method: "GET", isArray: true },
            create: { method: "POST"},
            get: { method: "GET"},
            remove: { method: "DELETE"},
            update: { method: "PUT"}
        });

    }]);

Controller :

// Update a product with PUT method
$scope.updateProduct = function() {
    ProductService.update({id: 1234,color:blue}, function(data) {
        // do something which you want with response
   });
};

For more detail please refer link.

AngularJS: Can't send a PUT request with $resource

2 Answers2