I have an angular.js application and i need to do CORS request.
I want to define my rest services "the angular" using angular resources, described here: http://docs.angularjs.org/tutorial/step_11.
But i haven't found a way to get this working. On google i found the following sample code: http://jsfiddle.net/ricardohbin/E3YEt/, but this seems not to work with angular-resources.
this is my app.js
'use strict'; angular.module('corsClientAngularApp', ['helloServices']) .config(function ($routeProvider) { $routeProvider .when('/', { templateUrl: 'views/main.html', controller: 'MainCtrl' }) .otherwise({ redirectTo: '/' }); }); this is my services.js with the 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 is my main.js with the controller using the $http, this 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 is another version of my main.js using angular resources. This does NOT work :(
'use strict'; angular.module('corsClientAngularApp') .controller('MainCtrl', function ($scope, $http, Hello) { $http.defaults.useXDomain = true; $scope.hello = Hello.query({name:'stijn'}); }); This is are the headers from the 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, like 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 are the headers from the 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, like 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 like the request url is wrong when using angular-resources. But why?
Thanks!