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

Question

내가 제어하는 ​​원격 서버에서 json을 가져 오는 데 문제가 있습니다. 나는 하나가 다음 작품 jQuery를 사용하여 포트 5000

에서 실행되는 데이터를 제공하는 포트 (3311), 다른, 요청 데이터에 실행이 웹 응용 프로그램을 가지고 :

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

같은 얻을 요청을 시도 각

$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. 

콘솔 리터를받을 OG는 OPTIONS 요청 이후에 발생한 오류가

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 

Answer 1

입니다 HTTP200 반환을 보여줍니다 CORS에 문제를 일으킬 수있는 'X-Requested-With'입니다. 이는 도메인 간 요청에서 헤더 (https://github.com/angular/angular.js/issues/1004)를 제거하여 v 1.1.1 (불안정 분기 - see v1.1.1 bug fixes)에서 수정되었습니다.

머리글을 제거하고 1.0 분기에서이 기능을 쉽게 사용할 수 있습니다. 다음 라인 앱에서 $ HTTP 서비스에 의해 수행 모든 요청 (뿐만 아니라 CORS)에서 헤더를 제거합니다 :

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

업데이트 약간의 경고 - 각도 (jQuery를 같은) CORS를 지원하지 않습니다 IE9 용. IE10은 CORS를 지원하는 최초의 IE 브라우저입니다. 이 블로그 게시물은 특정 조건에서 IE8/IE9에서 CORS 지원을받을 수 있지만,이 각도 $ HTTP 서비스와 함께 작동하지 않습니다 방법을 설명합니다 http://blogs.msdn.com/b/ieinternals/archive/2010/05/13/xdomainrequest-restrictions-limitations-and-workarounds.aspx

Answer 2

의 Web.config

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

Answer 3

대답은 위의 해결 문제. HTML 페이지와 같은 서비스와 각도 제어를 호출 한

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

:

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

Answer 4

요청 헤더를 서버 측에 설정되어야한다. 당신이 저지 서블릿 닷컴에 초기화 있었던 파라미터로 전달 될 수있는 사용자 정의 클래스를 개발할 수있는 서버의

<filter> 
    <filter-name>ResponseFilter</filter-name> 
    <filter-class>org.apache.catalina.filters.CorsFilter</filter-class> 
</filter> 
<filter-mapping> 
    <filter-name>ResponseFilter</filter-name> 
    <url-pattern>/*</url-pattern> 
</filter-mapping> 

2.Independent 할 수있는이

1.One를 설정하는 방법은 여러 가지가 있습니다. sun.jersey.spi.container.ContainerResponseFilters 도우미.TestCorpsFilter enter code here `공용 클래스 TestCorpsFilter는 jQuery를 위해 각도와`$ .support.cors = TRUE '에 대한 {

@Override 
    public ContainerResponse filter(ContainerRequest arg0, ContainerResponse arg1) { 
     ResponseBuilder resp = Response.fromResponse(arg1.getResponse()); 
     resp.header("Access-Control-Allow-Origin", "*").header("Access-Control-Allow-Methods", 
       "GET, POST, OPTIONS"); 

     String requestHeader = arg0.getHeaderValue("Access-Control-Request-Headers"); 

     if (requestHeader != null && !requestHeader.equals("")) { 
      resp.header("Access-Control-Allow-Headers", requestHeader); 
     } 

     arg1.setResponse(resp.build()); 
     return arg1; 

    }