CORS with angular.js $resource and ServiceStack Servies

Boas Enkler picture Boas Enkler · Sep 12, 2013 · Viewed 8.2k times · Source

i've a servicestack REST Service and a angular.js client. The Web is hosted on an other port then the RESTService.

Retrieving data with $http works but using $resource doesn't work.

in the REST Service I set the following global headers:

 GlobalResponseHeaders =
                    {
                    { "Access-Control-Allow-Origin", "*" },
                    { "Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS" },
                    { "Access-Control-Allow-Headers", "X-Requested-With"}
                    }

Now in angular.js I can read successfully read the methods with the $http for example

$http({
        method:'get',
        url:address,
        requesttype:'application/json'
    }).success(function(data) {
        $scope.ServiceStatus = data;
    });

but reading the same address with the $ressource doesn't work my code for the factory is:

myApp.factory('qaServiceStatus', function($resource){
  return $resource('http://localhost:1338/api/status', {}, {
    query: {method:'GET', headers: {'Content-Type': 'application/json'}, params:{}}

    });
});

and i use it this way in the controller

$scope.RESTStatus = qaServiceStatus.get({});

the error i get is: Origin http://localhost:7000 is not allowed by Access-Control-Allow-Origin.
and XMLHttpRequest cannot load http://localhost/api/status. Origin http://localhost:7000 is not allowed by Access-Control-Allow-Origin.

what am I doing wrong?

I also tried to change the allowed origiin to the exact adress but this doesn't help

Answer

JoakimB picture JoakimB · Sep 12, 2013

This is the API responding to your client, not allowing your client origin to make a CORS request. I dont know what kind of backend you use but you need to review your Access-Control-Allow-Origin settings in order to make it work.

Update:

Bug or feature, u'll have to ask the angularjs team. Atm they interpreet :port as a variable instead of a port. Solution is to escape the :

Example:

$resource('http://localhost:1338\:1338/api/status', {}, {.....