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!
You have to enable CORS and whitelist your Angular app URL http://localhost:3000 on your backend server which serves at http://localhost:40000/api/... . No action required on Angular app side. Save this answer.
To enable CORS, you can extend the BrowserXhr class (considering you're working on Typescript for Angular 2) and include that in the bootstrapping process. Create a file in your Angular 2 project named cust-ext-browser-xhr.
If you have access to the server running the endpoint, you can simply add Access-Control-Allow-Origin: * to your header to allow all origins or you can add Access-Control-Allow-Origin: http://localhost:4200 to allow only requests from the localhost.
URL for $resource
accepts using colon for parameters. Therefore when using port in url you need to escape the colon for port. This is explained in $resource docs
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With