How to call @POST RESTful service from Angular JS create function using $resource

Question

I'm trying to call REST service at Java backend from Angular-JS page. I can fetch GET data successfully but could not call @POST resource.

For example at the Java backend here is my RESTful service method -

@POST
    @Consumes(MediaType.APPLICATION_JSON)
    @Produces(MediaType.APPLICATION_JSON)
    public User create(User user) {
        User usr1 = new User();
        usr1.setId(3);
        usr1.setFirstName("John");
        usr1.setLastName("Paul");

        return usr1;
    }

At the AngularJS part here is the Service factory :

var app = angular.module('app', ['ngResource']);

app.factory('UsersFactory', function ($resource) {
    return $resource('http://localhost:8080/demoApp/service/users', {}, {
        query: { method: 'GET', isArray: true },
        create: { method: 'POST'}
    })
});

Here is the AngularJS controller :

app.controller('userCreationCtrl', ['$scope', 'UsersFactory', '$location',
    function ($scope, UsersFactory, $location) {

        $scope.createNewUser = function () {         
            UsersFactory.create($scope.user);            
        }
   }]);

The error is showing in Javascript Console of the Chrome Browser -

XMLHttpRequest cannot load http://localhost:8080/demoApp/service/users. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:63342' is therefore not allowed access.

Its a CORS problem but you say the GET works, so you must have CORS already partially setup. I had the same problem (CORS working in a GET request but not in a POST request), I was using a third party CORS filter which I could not get to work correctly. Which server are you using? If it is Tomcat, it has its own CORS filter which works incredibly well. — Gimby
– Gimby, Commented Jul 15, 2014 at 12:19

nicearma · Accepted Answer · 2014-07-15 11:55:45Z

0

Your problem is because in the service rest you can allow to make CORS so you have to change or add some configuration in server side change that, or the more simple way is to put the html code in the same url that is your server, localhost:8080 (you have your html code in localhost:63342)

In your server side you have to add the "Access-Control-Allow-Origin=*" or something like that

answered Jul 15, 2014 at 11:55

nicearma

7802 gold badges8 silver badges22 bronze badges

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

3 Comments

Jayanta Pramanik Over a year ago

response.setHeader("Access-Control-Allow-Origin", "*"); response.setHeader("Access-Control-Allow-Methods", "POST, PUT, GET, OPTIONS, DELETE"); Please suggest what else to do.

nicearma Over a year ago

but you see this in the reponse? see it with the debug console of firefox or chrome

salgmachine Over a year ago

check out this open source implementation: github.com/ebay/cors-filter (apache licensed) especially have a look at the advanced configuration example. for me this is a reliably working solution as I recently had the same problem. A simple filter implementation in some cases does not seem to work especially when handling preflighted requests. A very good documentation on CORS can be found here developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

Collectives™ on Stack Overflow

How to call @POST RESTful service from Angular JS create function using $resource

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related