2013-04-25 3 views
13

私はangular.jsアプリケーションを持っています。私はCORS要求を行う必要があります。angular.js-resourceでcors requestを有効にするには

ここでは、角度リソースを使用して「角度」を定義したいと考えています(http://docs.angularjs.org/tutorial/step_11)。

しかし、私はこれを得る方法を見出していません。 Googleでは次のサンプルコードが見つかりました:http://jsfiddle.net/ricardohbin/E3YEt/、これは角度リソースでは動作しないようです。

が、これはこれは、残りのサービス

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

これは、$ HTTPを使用して、コントローラと私のmain.js、この作品であると私services.jsである私のapp.js

'use strict'; 

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

です!:

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

は(クロムデベロッパーツールから)作業要求からヘッダです:

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) 

角度リソースを使用するとリクエストURLが間違っているようですが、なぜですか?

s!

+0

'does not work'は問題の定義ではありません。ブラウザのコンソールでリクエストを調べて詳細を入力してください – charlietfl

+0

リクエストヘッダを追加しました – cremersstijn

答えて

7

$resourceのURLは、パラメータとしてコロンを使用できます。したがって、urlでportを使用する場合は、ポートのコロンをエスケープする必要があります。これは、$resource docsで説明されています。

+0

" "3": "l"、 "4": "o"、 "5": "" 6 ":" s "、" 7 ":" t "、" 8 ":" i "、" 9 " : "j"、 "10": "n"} "hello stijn"の代わりに。どうすれば修正できますか? – cremersstijn

+3

@cremersstijn $ resourceは、返されるプロパティを持つオブジェクトを必要とします。文字を値として持つプロパティとして各文字の位置を割り当てることで、文字列をそのオブジェクトに強制します。 – c0bra

+2

ここで、正確にリソースdocsに、ポートをエスケープすることが記述されていますか? –

関連する問題