AngularJS : $ http.post가 오류를 throw합니다.

Question

일부 데이터 게시를 위해 요청 함을 사용하고 있습니다. 내 컨트롤러에는 다음 코드가 있습니다.

$http.post('http://requestb.in/redacted', fooBar). 
    success(function(data) { 
     $scope.fooBarPostedSuccess = true; 
    }). 
    error(function(err) { 
     console.log("Error while posting to Request Bin"); 
     console.log("Error Info : " + err); 
    }); 

이것은 UI의 버튼을 통해 트리거됩니다. 이 트리거됩니다 이제 때, 데이터는 빈 요청을 게시하지 않고이 오류 얻을 : 내가 AngularJS와 컨트롤러를 통해 빈을 요청하는 데이터를 게시하려면 어떻게

XMLHttpRequest cannot load http://requestb.in/redacted. 
Origin http://localhost:3000 is not allowed by Access-Control-Allow-Origin. 

를? 또한, 위의 오류는 무엇을 의미합니까?

EDIT : 여기에 AngularJS와 함께 Node.js를 사용하고 있습니다. 아마도 Node와 관련이 있습니까?

Answer 1

아 ... 네 ... 교차 도메인 스크립팅 문제를 다루고 있습니다. 이것은 AngularJS 문제는 아니지만 브라우저 보안 제한과 매우 일반적인 마찰 지점입니다.

CORS (Cross-Origin Resource Sharing)를 수행하지 않고도 다른 도메인 (예 : 귀하의 경우 localhost 호스팅)과 POST/PUT/DELETE를 수행 할 수 없습니다. 도메인 간 HTTP 요청의 경우 GET으로 제한됩니다. 당신의 API가 어떤 도메인 간 기능을 지원하는 경우

1. 참조 :

   당신은 두 가지 옵션이 있습니다. 이것은 CORS를 통해 이루어 지거나 오버로드 된 GET API 또는 JSONP를 통해 이루어질 수 있습니다.

2. 서버를 통한 프록시 요청. Node.js를 사용하고 있기 때문에 서버를 통한 REST 프록시는 매우 간단합니다 ... Node.js 서버에 경로 처리기 (예 :/api/redacted)를 설정하고 실제 요청을 새로 작성해야합니다 Restler (NPM 패키지)와 같은 API 서버를 사용하여 결과를 클라이언트에 반환하십시오.

희망이 있습니다.

는 편집 :

귀하의 API는 JSONP (Your API Docs)를 지원합니다. Angular의 JSONP 함수를 사용하여 API의 JSONP 기능에 액세스 할 수 있어야합니다. (Angular.js JSONP docs).

서비스에 POST 할 수 있기를 원하므로 두 번째 방법을 사용해야합니다.

Answer 2

CORS 그 길에서 있다고,

http://en.wikipedia.org/wiki/Cross-origin_resource_sharing

http://www.w3.org/TR/cors/

https://developer.mozilla.org/en-US/docs/HTTP/Access_control_CORS

이제 모두 GET 수 있으며 POST ... 내가 너무 각도의 $ HTTP 원 것을 발견했다 나는 POST 도메인을 교차시키지 않겠다. 나는 그것에 대해 의심했다. 왜냐하면 jquery ajax가 크로스 도메인을 잘 게시 할 수있는 다른 프로젝트에서 호출하기 때문이다. 그래서, $ $ POST와 $ .ajax POST를 바꿨다.

// $http({ 
// url: url, 
// method: "POST", 
// data: data 
// }) 
// .success(successCallback) 
// .error(errorCallback) 

// ole reliable 
$.ajax({ 
    type : "POST", 
    url : url, 
    data : data, 
    success : successCallback, 
    error : errorCallback, 
    cache : false, 
    dataType : 'json', 
}) 

Answer 3

RequestBin 대신 PutsReq을 사용할 수 있습니다. PutsReq는 CORS을 지원합니다.