AngularJS exécute une requête OPTIONS HTTP pour une ressource de croix-origine

Question

Je suis en train de configuration AngularJS pour communiquer avec un cross-origin resource où l'actif de l'hôte qui offre mes fichiers de modèle se trouve sur un domaine différent et, par conséquent, la demande XHR qui angulaire effectue doit être inter-domaine. J'ai ajouté la appropriée de la SCRO en-tête de mon serveur la requête HTTP pour faire ce travail, mais il ne semble pas fonctionner. Le problème est que lorsque je passe en revue les requêtes HTTP dans mon navigateur (chrome) la demande adressée à l'actif du fichier est une des OPTIONS de demande (il devrait être d'une requête GET).

Je ne suis pas sûr de savoir si c'est un bug dans AngularJS ou si je dois configurer quelque chose. Ce que je comprends de la XHR wrapper peut pas en faire une des OPTIONS de requête HTTP, donc il semble que le navigateur est à essayer de comprendre si c'est "autorisé" à télécharger l'actif d'abord avant qu'il effectue la requête GET. Si c'est le cas, dois-je créer de la SCRO en-tête (Access-Control-Allow-Origin: http://asset.host...) à l'actif de l'hôte?

Answer 1

OPTION de demande sont en aucun cas AngularJS bug, c'est de cette façon Cross-Origin Resource sharing standard mandats navigateurs de se comporter. Veuillez vous référer à ce document: https://developer.mozilla.org/en-US/docs/HTTP_access_controloù, dans la section "Présentation", il dit:

Le Cross-Origin Resource sharing ouvrages de référence par l'ajout de nouveaux HTTP les en-têtes de permettre aux serveurs de décrire l'ensemble des origines qui sont autorisé à lire les informations à l'aide d'un navigateur web. En outre, pour les méthodes de demande de HTTP qui peuvent provoquer des effets secondaires sur les données de l'utilisateur (en en particulier, pour les méthodes HTTP autres que GET ou POST pour utilisation avec certains types MIME), le cahier des charges des mandats que les navigateurs "contrôle en amont" de la demande, de solliciter des méthodes prises en charge à partir du serveur avec un HTTP OPTIONS d'en-tête de requête, puis, lors de "l'approbation" de l' le serveur, l'envoi de la demande réelle avec le réel de la requête HTTP la méthode. Les serveurs peuvent également informer les clients si les "informations d'identification" (y compris les Cookies et l'Authentification HTTP de données) doit être envoyé avec les demandes.

Il est très difficile de proposer une solution générique qui pourrait fonctionner pour tous les serveurs WWW, comme le programme d'installation varie selon le serveur lui-même et les verbes HTTP que vous avez l'intention de les soutenir. Je vous invite à vous rendre sur cet excellent article (http://www.html5rocks.com/en/tutorials/cors/) qui a beaucoup plus de détails précis sur les en-têtes qui doit être envoyé par un serveur.

Answer 2

Angulaire 1.2.0rc1+, vous devez ajouter un resourceUrlWhitelist.

1.2: version ils ont ajouté une escapeForRegexp fonction de sorte que vous n'avez plus à échapper à la les chaînes. Vous pouvez simplement ajouter l'url directement

'http://sub*.assets.example.com/**' 

assurez-vous d'ajouter ** pour les sous-dossiers. Ici, c'est un travail jsbin pour 1.2: http://jsbin.com/olavok/145/edit

---

1.2.0 rc: Si vous êtes toujours sur une version rc, l'angle 1.2.0rc1 la solution ressemble à:

.config(['$sceDelegateProvider', function($sceDelegateProvider) {
     $sceDelegateProvider.resourceUrlWhitelist(['self', /^https?:\/\/(cdn\.)?yourdomain.com/]);
 }])

Voici une jsbin exemple où il travaille pour la 1.2.0rc1: http://jsbin.com/olavok/144/edit

---

Pré 1.2: Pour les versions plus anciennes (réf http://better-inter.net/enabling-cors-in-angular-js/), vous devez ajouter les 2 lignes suivantes à votre configuration:

$httpProvider.defaults.useXDomain = true;
delete $httpProvider.defaults.headers.common['X-Requested-With'];

Voici une jsbin exemple où il travaille pour le pré 1.2 les différentes versions: http://jsbin.com/olavok/11/edit

Answer 3

Il est également possible de substituer la requête OPTIONS (a été seulement testé dans Chrome) :

Answer 4

Votre service doit répondre à un `` demande avec en-têtes comme celles-ci :

Voici une bonne doc : http://www.html5rocks.com/en/tutorials/cors/#toc-adding-cors-support-to-the-server

Answer 5

Le même document dit

Contrairement à une simple demande (voir ci-dessus), "contrôlé" demande d'envoyer d'abord un HTTP OPTIONS d'en-tête de demande de la ressource sur l'autre domaine, afin de déterminer si la demande est sûr d'envoyer. Les requêtes inter-domaines sont contrôlé comme cela, car ils peuvent avoir des implications pour les données de l'utilisateur. En particulier, une demande est contrôlé si:

Il utilise des méthodes autres que GET ou POST. Aussi, si le POST est utilisée pour envoyer les données de la demande avec un Type de Contenu autre que l'application/x-www-form-urlencoded, multipart/form-data, ou text/plain, par exemple, si la requête POST envoie une charge utile XML au serveur à l'aide de l'application/xml ou texte/xml, alors que la demande est contrôlé.

Il définit les en-têtes personnalisés à la demande (par exemple, la demande utilise un en-tête tel que X-PINGOTHER)

Lors de la demande initiale est d'Obtenir sans en-têtes personnalisés, le navigateur ne doit pas faire des Options de demande de qui il le fait maintenant. Le problème est qu'il génère un en-tête X-Requested-Avec laquelle les forces de la demande Options. Voir https://github.com/angular/angular.js/pull/1454 sur la façon de supprimer cet en-tête