angularjs – 如何使用angular.js-resource启用cors请求

前端之家收集整理的这篇文章主要介绍了angularjs – 如何使用angular.js-resource启用cors请求前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个angular.js应用程序,我需要做CORS请求.

我想使用角度资源定义我的休息服务“角度”,如下所述:http://docs.angularjs.org/tutorial/step_11.

但是我没有找到一种办法让这个工作.
在谷歌我找到以下示例代码http://jsfiddle.net/ricardohbin/E3YEt/,但这似乎不适用于角度资源.

这是我的app.js

  1. 'use strict';
  2.  
  3. angular.module('corsClientAngularApp',['helloServices'])
  4. .config(function ($routeProvider) {
  5. $routeProvider
  6. .when('/',{
  7. templateUrl: 'views/main.html',controller: 'MainCtrl'
  8. })
  9. .otherwise({
  10. redirectTo: '/'
  11. });
  12. });

这是我的services.js与其余的服务

  1. angular.module('helloServices',['ngResource']).
  2. factory('Hello',function($resource){
  3. return $resource('http://localhost:8080/cors-server/hello/:name',{},{
  4. query: {method:'GET',params:{name:'name'},isArray:false}
  5. });
  6. });

这是我的main.js与控制器使用$http,这个工程!

  1. 'use strict';
  2.  
  3. angular.module('corsClientAngularApp')
  4. .controller('MainCtrl',function ($scope,$http,Hello) {
  5. $http.defaults.useXDomain = true;
  6.  
  7.  
  8. $http.get('http://localhost:8080/cors-server/hello/stijn')
  9. .success(function(data) {
  10. $scope.hello = data;
  11. });
  12. });

这是我使用角度资源的main.js的另一个版本.这不工作:(

  1. 'use strict';
  2.  
  3. angular.module('corsClientAngularApp')
  4. .controller('MainCtrl',Hello) {
  5. $http.defaults.useXDomain = true;
  6. $scope.hello = Hello.query({name:'stijn'});
  7. });

这是工作请求中的标题(来自chrome devtools):

  1. Request URL:http://localhost:8080/cors-server/hello/stijn
  2. Request Method:OPTIONS
  3. Status Code:200 OK
  4.  
  5. Request Headers
  6. Accept:*/*
  7. Accept-Charset:ISO-8859-1,utf-8;q=0.7,*;q=0.3
  8. Accept-Encoding:gzip,deflate,sdch
  9. Accept-Language:nl-NL,nl;q=0.8,en-US;q=0.6,en;q=0.4
  10. Access-Control-Request-Headers:accept,origin,x-requested-with
  11. Access-Control-Request-Method:GET
  12. Cache-Control:max-age=0
  13. Connection:keep-alive
  14. Host:localhost:8080
  15. Origin:http://localhost:9000
  16. Referer:http://localhost:9000/
  17. User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.31 (KHTML,like Gecko) Chrome/26.0.1410.64 Safari/537.31
  18.  
  19. Response Headers
  20. Access-Control-Allow-Headers:accept,x-requested-with
  21. Access-Control-Allow-Methods:GET
  22. Access-Control-Allow-Origin:*
  23. Content-Length:0
  24. Date:Thu,25 Apr 2013 10:42:34 GMT
  25. Server:Apache-Coyote/1.1

这些是NOt工作请求中的头文件

  1. Request URL:http://localhost/cors-server/hello/stijn
  2. Request Method:OPTIONS
  3. Status Code:200 OK
  4.  
  5. Request Headers
  6. Accept:*/*
  7. Accept-Charset:ISO-8859-1,x-requested-with
  8. Access-Control-Request-Method:GET
  9. Cache-Control:max-age=0
  10. Connection:keep-alive
  11. Host:localhost
  12. Origin:http://localhost:9000
  13. Referer:http://localhost:9000/
  14. User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.31 (KHTML,like Gecko) Chrome/26.0.1410.64 Safari/537.31
  15.  
  16.  
  17. Response Headers
  18. Allow:GET,HEAD,POST,OPTIONS,TRACE
  19. Connection:Keep-Alive
  20. Content-Length:0
  21. Content-Type:text/plain
  22. Date:Thu,25 Apr 2013 10:41:12 GMT
  23. Keep-Alive:timeout=5,max=100
  24. Server:Apache/2.2.22 (Win32)

使用角度资源时,请求url看起来是错误的.但为什么?

谢谢!

$资源的URL接受使用冒号的参数.因此,当在url中使用port时,需要转义冒号的端口.这在 $resource docs中解释

猜你在找的Angularjs相关文章