$ http.get n’est pas autorisé par Access-Control-Allow-Origin mais $ .ajax est

Question

J'ai un problème de l'extraction de json à partir d'un serveur distant que je contrôle. J'ai 2 applications web, une portion de données et en cours d'exécution sur le port 3311, l'autre, la demande de données, est en cours d'exécution sur le port 5000.

à l'aide de jquery, les travaux suivants:

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

lors de la tentative de la même requête get avec angulaire

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

Je reçois l'erreur

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

Le journal de la console affiche une erreur survenant après la demande d'OPTIONS retourne 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

et les en-têtes d'être renvoyé de la demande d'OPTIONS sont

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

Ceci est probablement dû au comportement par défaut Angulaire pour inclure l'en-tête de demande 'X-Requested-With', ce qui peut causer des problèmes avec la SCRO. Ceci a été corrigé dans v 1.1.1 (la branche unstable - voir v1.1.1 corrections de bugs) par la suppression de l'en-tête de la croix de domaine de demandes: https://github.com/angular/angular.js/issues/1004.

Il est facile de supprimer l'en-tête et de le faire fonctionner sur la 1.0 branche. La ligne suivante va supprimer l'en-tête de toutes les demandes (pas seulement de la SCRO) fait par le $service http dans votre application:

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

Mise à jour Un petit avertissement - Angulaire (comme jQuery) ne prend pas en charge la SCRO pour IE9. IE10 est le premier navigateur IE qui prend en charge la SCRO. Ce blog explique comment vous pouvez obtenir le soutien de la SCRO dans IE8/IE9 sous certaines conditions, mais il ne fonctionne pas avec l'angle $service http: http://blogs.msdn.com/b/ieinternals/archive/2010/05/13/xdomainrequest-restrictions-limitations-and-workarounds.aspx