如何使用angular.js資源啓用cors請求

Question

我有一個angular.js應用程序，我需要做CORS請求。

我想使用角度資源定義我的休息服務「角度」，如下所述：http://docs.angularjs.org/tutorial/step_11。

但我還沒有找到一種方法來得到這個工作。 在谷歌我找到以下示例代碼：http://jsfiddle.net/ricardohbin/E3YEt/，但這似乎不適用於角度資源。

這是我app.js

'use strict'; 

angular.module('corsClientAngularApp', ['helloServices']) 
    .config(function ($routeProvider) { 
    $routeProvider 
     .when('/', { 
     templateUrl: 'views/main.html', 
     controller: 'MainCtrl' 
     }) 
     .otherwise({ 
     redirectTo: '/' 
     }); 
    }); 

這是我services.js，其餘服務

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，這個作品！：

'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的另一個版本。這不工作:(

'use strict'; 

angular.module('corsClientAngularApp') 
    .controller('MainCtrl', function ($scope, $http, Hello) { 
    $http.defaults.useXDomain = true; 
    $scope.hello = Hello.query({name:'stijn'}); 
    }); 

這是從工作要求的標頭（來自鉻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 

而這些都是從沒有工作要求的標題：

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) 

使用角度資源時，請求網址看起來不正確，但爲什麼？

謝謝小號！

Answer 1

$resource的URL接受使用冒號參數。因此，當在URL中使用端口時，您需要將冒號轉義爲端口。這在$resource docs