2013-06-14 9 views
5

우리는 현재 약간의 AngularJS 프로젝트를 개발 중이며 프론트 엔드부터 시작하여 매우 순수한 HTML과 JavaScript입니다.AngularJS 및 ngResource로 외부 API 호출

그러나 ngResource를 사용하여 API 호출을해야합니다. 현재 우리는 canned을 사용하여 json 반환 값을 조롱합니다.

이는 JSON을 반환 말 :

GET http://ip-address/something/1.json 

내가 ngResource에서이 전화를 할 수 있도록하려면이 작동하지 않는 몇 가지 이유를 들어

app.controller('SomethingCtrl', function ($scope, $resource) { 
    Something = $resource("http://ip-address/something/:id", {id: "@id"}); 
    $scope.something = Something.get({id:1}); 
}); 

, 엔드 포인트가 제대로 작동하지만. Angular는이 URL에 옵션 요청을합니다.

일종의 XSS 보호 마법인가요? 어떻게 해결합니까?

업데이트 : 예에 추가 된 IP 주소

편집 : CORS이 허용되도록 내가 모의 API 서버를 변경 한

.

나는이 헤더와 OPTIONS 요청이

Access-Control-Allow-Headers:X-Requested-With 
Access-Control-Allow-Max-Age:86400 
Access-Control-Allow-Methods:GET, POST, PUT, DELETE, HEAD, OPTIONS 
Access-Control-Allow-Origin:* 

통과하지만 지금 GET 요청을 (응답이 반환됩니다) 취소됩니다 이제 돌아갑니다. 그래서 Angular는 일종의 마법을 사용한다고 가정합니다.

+1

외부 API가 JSONP를 지원하는 경우 JSONP을 볼 수 있습니다 – Atrix1987

+1

_ $ resource_의 첫 번째 매개 변수는 전체 URL 'http : // ip-address/something/: id.json' – remigio

+0

Angular App과 "canned"리소스가 동일한 도메인 : 포트에서 실행됩니까? 그렇지 않다면, [Jquery : 왜 GET 요청의 OPTIONS 요청을 받습니까?] (http://stackoverflow.com/questions/1256593/jquery-why-am-i-getting-an-options-request- insted-of-a-get-request). – Stewie

답변

7

좋습니다. 알아 냈습니다. $ http 서비스를 삽입하고 useXDomain 플래그를 설정해야합니다.

app.controller('SomethingCtrl', function ($scope, $http, $resource) { 
    $http.defaults.useXDomain = true; 
    Something = $resource("http://ip-address/something/:id", {id: "@id"}); 
    $scope.something = Something.get({id:1}); 
}); 

또한. 서비스에 대한 모든 요청은 올바른 CORS 헤더 (OPTIONS 요청뿐만 아니라)를 반환해야합니다.

+0

Angular에 'useXDomain'과 같은 것이 없습니다. Angular 코드는 작성하지 않았습니다. https://github.com/angular/angular.js/issues/2956 –

관련 문제