angularjs - How to enable cors request with angular.js-resource -
i have angular.js application , need cors request.
i want define rest services "the angular" using angular resources, described here: http://docs.angularjs.org/tutorial/step_11.
but haven't found way working. on google found following sample code: http://jsfiddle.net/ricardohbin/e3yet/, seems not work angular-resources.
this app.js
'use strict'; angular.module('corsclientangularapp', ['helloservices']) .config(function ($routeprovider) { $routeprovider .when('/', { templateurl: 'views/main.html', controller: 'mainctrl' }) .otherwise({ redirectto: '/' }); });
this services.js rest services
angular.module('helloservices', ['ngresource']). factory('hello', function($resource){ return $resource('http://localhost:8080/cors-server/hello/:name', {}, { query: {method:'get', params:{name:'name'}, isarray:false} }); });
this main.js controller using $http, works!:
'use strict'; angular.module('corsclientangularapp') .controller('mainctrl', function ($scope, $http, hello) { $http.defaults.usexdomain = true; $http.get('http://localhost:8080/cors-server/hello/stijn') .success(function(data) { $scope.hello = data; }); });
this version of main.js using angular resources. not work :(
'use strict'; angular.module('corsclientangularapp') .controller('mainctrl', function ($scope, $http, hello) { $http.defaults.usexdomain = true; $scope.hello = hello.query({name:'stijn'}); });
this headers working request (from chrome devtools):
request url:http://localhost:8080/cors-server/hello/stijn request method:options status code:200 ok request headers accept:*/* accept-charset:iso-8859-1,utf-8;q=0.7,*;q=0.3 accept-encoding:gzip,deflate,sdch accept-language:nl-nl,nl;q=0.8,en-us;q=0.6,en;q=0.4 access-control-request-headers:accept, origin, x-requested-with access-control-request-method:get cache-control:max-age=0 connection:keep-alive host:localhost:8080 origin:http://localhost:9000 referer:http://localhost:9000/ user-agent:mozilla/5.0 (windows nt 6.1; wow64) applewebkit/537.31 (khtml, gecko) chrome/26.0.1410.64 safari/537.31 response headers access-control-allow-headers:accept, origin, x-requested-with access-control-allow-methods:get access-control-allow-origin:* content-length:0 date:thu, 25 apr 2013 10:42:34 gmt server:apache-coyote/1.1
and these headers not working request:
request url:http://localhost/cors-server/hello/stijn request method:options status code:200 ok request headers accept:*/* accept-charset:iso-8859-1,utf-8;q=0.7,*;q=0.3 accept-encoding:gzip,deflate,sdch accept-language:nl-nl,nl;q=0.8,en-us;q=0.6,en;q=0.4 access-control-request-headers:accept, origin, x-requested-with access-control-request-method:get cache-control:max-age=0 connection:keep-alive host:localhost origin:http://localhost:9000 referer:http://localhost:9000/ user-agent:mozilla/5.0 (windows nt 6.1; wow64) applewebkit/537.31 (khtml, gecko) chrome/26.0.1410.64 safari/537.31 response headers allow:get,head,post,options,trace connection:keep-alive content-length:0 content-type:text/plain date:thu, 25 apr 2013 10:41:12 gmt keep-alive:timeout=5, max=100 server:apache/2.2.22 (win32)
it looks request url wrong when using angular-resources. why?
thanks!
url $resource
accepts using colon parameters. therefore when using port in url need escape colon port. explained in $resource docs