$http.get은 Access-Control-Allow-Origin에서 허용되지 않지만 $.ajax는 허용됩니다.

$http.get은 Access-Control-Allow-Origin에서 허용되지 않지만 $.ajax는 허용됩니다.

제어하고 있는 리모트서버에서 json을 취득하는 데 문제가 있습니다.2개의 웹 어플리케이션이 있습니다.하나는 데이터 처리 중이고 포트 3311에서 실행 중이고, 다른 하나는 데이터를 요구하는 웹 어플리케이션이 포트 5000에서 실행 중입니다.

jquery를 사용하여 다음 작업을 수행합니다.

$.ajax({
  url: "http://localhost:3311/get-data",
  type: 'GET',
  dataType: 'json',
  beforeSend: function(xhr) {
    xhr.setRequestHeader("x-some-header", "some-value");
  }
})
.done(function(data) { 
    $rootScope.$apply(function() {d.resolve(data); });
})
.fail(function(data) {
    $rootScope.$apply(function() {d.reject(data); });
});

동일한 시도를 할 때 angular로 get request를 받습니다.

$http
    .get("http://localhost:3311/get-data", { headers: {"x-some-header": "some-value"} })
    .success(function(data) { d.resolve(data);})
    .error(function(data) { d.reject(data); });

에러를 수신했습니다.

Origin http://localhost:5000 is not allowed by Access-Control-Allow-Origin.

OPTIONS 요청이 HTTP200을 반환한 후 콘솔로그에 오류가 표시됩니다.

OPTIONS http://localhost:3311//get-data 200 (OK) angular.min.js:99

(anonymous function) angular.min.js:99

l angular.min.js:95

m angular.min.js:94

(anonymous function) app.js:78

b.extend.each jquery-1.9.1.min.js:3

b.fn.b.each jquery-1.9.1.min.js:3

(anonymous function) app.js:76

d angular.min.js:28

instantiate angular.min.js:28

(anonymous function) angular.min.js:52

updateView angular-ui-states.js:892

e.$broadcast angular.min.js:90

transition angular-ui-states.js:324

h angular.min.js:77

(anonymous function) angular.min.js:78

e.$eval angular.min.js:88

e.$digest angular.min.js:86

e.$apply angular.min.js:88

e angular.min.js:94

o angular.min.js:98

s.onreadystatechange angular.min.js:99

OPTIONS 요청에서 반환되는 헤더는 다음과 같습니다.

HTTP/1.1 200 OK
Cache-Control: private
Content-Type: text/plain
Server: Microsoft-IIS/8.0
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Headers: Content-Type, Accept, X-Requested-With, x-some-header
X-AspNet-Version: 4.0.30319
X-SourceFiles: =?UTF-8?B?....
X-Powered-By: ASP.NET
Date: Tue, 21 May 2013 01:52:37 GMT
Content-Length: 0

이는 요청 헤더를 포함하는 Angular 기본 동작에 의한 것으로 생각됩니다.'X-Requested-With'CORS에 문제가 생길 수 있습니다.이 문제는 v1.1.1(불안한 브랜치 - v1.1.1 버그 수정 참조)에서 크로스 도메인 요청(https://github.com/angular/angular.js/issues/1004)에서 헤더를 제거함으로써 수정되었습니다.

1.0 브런치에서는 헤더를 삭제하여 동작시키기 쉽습니다.다음 행은 앱의 $http 서비스에 의해 실행되는 모든 요청(CORS뿐만 아니라)에서 헤더를 삭제합니다.

yourModule
  .config(function($httpProvider){
    delete $httpProvider.defaults.headers.common['X-Requested-With'];
});

업데이트 A 약간의 경고 - 각도(jQuery 등)는 IE9용 CORS를 지원하지 않습니다.IE10은 CORS를 지원하는 최초의 IE 브라우저입니다.이 블로그 포스트에서는 특정 상황에서 IE8/IE9에서 CORS 지원을 받을 수 있는 방법에 대해 설명하고 있습니다.단, Angular $420 서비스에서는 사용할 수 없습니다.http://blogs.msdn.com/b/ieinternals/archive/2010/05/13/xdomainrequest-restrictions-limitations-and-workarounds.aspx

web.config

<system.webServer> 
<httpProtocol>
     <customHeaders>
       <add name="Access-Control-Allow-Origin" value="*" />
     </customHeaders>
   </httpProtocol>
  </system.webServer>

위의 답변으로 문제가 해결되었습니다.

<httpProtocol>
    <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*" />
     </customHeaders>
</httpProtocol>

HTML 페이지가 다음과 같은 서비스를 사용하여 앵귤러 컨트롤러를 호출하고 있을 때:

$http.get(dataUrl).success(function (data) {
     $scope.data.products = data;
})
.error(function (error) {
    $scope.data.error = error;
});

언급URL : https://stackoverflow.com/questions/16661032/http-get-is-not-allowed-by-access-control-allow-origin-but-ajax-is