it-swarm.com.de

$ http.get ist von Access-Control-Allow-Origin nicht erlaubt, $ .ajax jedoch

Ich habe ein Problem beim Abrufen von JSON von einem Remote-Server, den ich kontrolliere. Ich habe zwei Webanwendungen, von denen eine Daten bereitstellt und auf Port 3311 ausgeführt wird. Die andere, die Daten anfordert, wird auf Port 5000 ausgeführt.

mit jquery funktioniert folgendes:

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

wenn Sie das gleiche versuchen, holen Sie sich die Anfrage mit Angular

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

Ich erhalte den Fehler

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

Das Konsolenprotokoll zeigt einen Fehler an, der auftritt, nachdem die OPTIONS-Anforderung HTTP200 zurückgibt

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

und die Header, die von der OPTIONS-Anforderung zurückgegeben werden, sind

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
44
Jason

Dies liegt wahrscheinlich am Standardverhalten von Angular, um den Anforderungsheader 'X-Requested-With' Einzuschließen. Dies kann zu Problemen mit CORS führen. Dies wurde in Version 1.1.1 (dem instabilen Zweig) behoben - siehe v1.1.1 Bugfixes ) durch Entfernen des Headers aus domänenübergreifenden Anfragen: https://github.com/angular/angular.js/issues/1004 .

Es ist einfach, den Header zu entfernen und diesen in der 1.0-Verzweigung zum Laufen zu bringen. In der folgenden Zeile wird der Header von allen Anforderungen (nicht nur CORS) entfernt, die vom $ http-Dienst in Ihrer App ausgeführt werden:

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

Update Eine kleine Warnung - Angular (wie jQuery) unterstützt CORS für IE9 nicht. IE10 ist das erste = IE Browser, der CORS unterstützt. In diesem Blogpost wird beschrieben, wie Sie unter bestimmten Bedingungen CORS-Unterstützung in IE8/IE9 erhalten können, dies funktioniert jedoch nicht mit dem Angular $ http service: http://blogs.msdn.com/b/ieinternals/archive/2010/05/13/xdomainrequest-restrictions-limitations-and-workarounds.aspx

51
joakimbl

web.config

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

Angeforderte Header müssen auf der Serverseite gesetzt werden. Es gibt viele Möglichkeiten, dies einzustellen

1. Man kann sein

 <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.Unabhängig vom Server können Sie eine benutzerdefinierte Klasse entwickeln, die als Init-Parameter an das Jersey-Servlet com.Sun.jersey.spi.container.ContainerResponseFilters übergeben werden kann. Helpers.TestCorpsFilter enter code here `public class TestCorpsFilter implementiert ContainerResponseFilter {

    @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;

    }
0
Bad Developer

Die Antwort oben hat das Problem gelöst.

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

Wenn eine HTML-Seite einen angular Controller mit einem Service wie:

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