如何使用 angular.js-resource 启用 cors 请求 [英] How to enable cors request with angular.js-resource
问题描述
我有一个 angular.js 应用程序,我需要执行 CORS 请求.
I have an angular.js application and i need to do CORS request.
我想使用角度资源定义我的休息服务角度",描述如下:http://docs.angularjs.org/tutorial/step_11.
I want to define my rest services "the angular" using angular resources, described here: http://docs.angularjs.org/tutorial/step_11.
但我还没有找到让它工作的方法.在谷歌上,我找到了以下示例代码:http://jsfiddle.net/ricardohbin/E3YEt/,但这似乎不适用于 angular-resources.
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.
这是我的 app.js
this is my app.js
'use strict';
angular.module('corsClientAngularApp', ['helloServices'])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.otherwise({
redirectTo: '/'
});
});
这是我的 services.js 和其他服务
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}
});
});
这是我的 main.js,控制器使用 $http,这是有效的!:
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;
});
});
这是我的 main.js 的另一个版本,使用 angular 资源.这不起作用:(
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'});
});
这是来自工作请求的标头(来自 chrome devtools):
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)
使用 angular-resources 时,请求 url 似乎是错误的.但为什么?
It looks like the request url is wrong when using angular-resources. But why?
谢谢!
推荐答案
$resource
的 URL 接受使用冒号作为参数.因此,在 url 中使用 port 时,您需要为 port 转义冒号.这在 $resource 文档
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
这篇关于如何使用 angular.js-resource 启用 cors 请求的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!