如何实现与angular.js资源CORS请求

本文介绍了如何实现与angular.js资源CORS请求的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个angular.js应用程序，我需要做的CORS请求。

I have an angular.js application and i need to do CORS request.

我想我的定义REST服务角采用了棱角分明的资源，描述如下：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.

但我还没有找到一种方法来得到这个工作。
在谷歌，我发现下面的示例code：，但这似乎不具有角资源工作。

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的另一个版本。这并不工作：（

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'});
  });

这是是从工作要求的标头（来自铬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)

它看起来像请求URL采用了棱角分明资源的时候是错误的。但为什么？

It looks like the request url is wrong when using angular-resources. But why?

谢谢！

如何实现与angular

如何实现与angular.js资源CORS请求

问题描述

推荐答案