Qu'est-ce que le domaine croisé?
Concept: Tant qu'il y a une différence dans le protocole, le nom de domaine ou le port, il est considéré comme un domaine différent.
La copie de code est la suivante:
L'URL indique si la communication est autorisée
http://www.a.com/a.js
http://www.a.com/b.js autorisé sous le même nom de domaine
http://www.a.com/lab/a.js
http://www.a.com/script/b.js différents dossiers sous le même nom de domaine sont autorisés
http://www.a.com:8000/a.js
http://www.a.com/b.js Le même nom de domaine, les différents ports ne sont pas autorisés
http://www.a.com/a.js
https://www.a.com/b.js Le même nom de domaine, différents protocoles ne permettent pas
http://www.a.com/a.js
http://70.32.92.74/b.js Le nom de domaine et le nom de domaine correspond à IP ne sont pas autorisés
http://www.a.com/a.js
http://script.a.com/b.js Le domaine principal est le même, mais le sous-domaine n'est pas autorisé
http://www.a.com/a.js
http://a.com/b.js Le même nom de domaine, différents noms de domaine secondaire (comme ci-dessus) ne sont pas autorisés (il n'y a pas d'accès aux cookies dans ce cas)
http://www.cnblogs.com/a.js
http://www.a.com/b.js différents noms de domaine ne sont pas autorisés
La différence entre les ports et les protocoles ne peut être résolue qu'à l'arrière-plan.
Partage de ressources inter-domaines (CORS)
CROS (partage de ressources croisées) CROS) Le partage de ressources inter-domaines définit la façon dont le navigateur et le serveur doivent communiquer lors de l'accès aux ressources transversales. L'idée de base derrière CROS est d'utiliser un en-tête HTTP personnalisé pour permettre au navigateur de communiquer avec le serveur, décidant ainsi si la demande ou la réponse doit être réussie ou échouée.
La copie de code est la suivante:
<script type = "text / javascript">
var xhr = new xmlHttpRequest ();
xhr.open ("get", "/ trigkit4", true);
xhr.send ();
</cript>
Le Trigkit4 ci-dessus est un chemin relatif. Si nous voulons utiliser CORS, le code AJAX pertinent peut ressembler à ceci:
La copie de code est la suivante:
<script type = "text / javascript">
var xhr = new xmlHttpRequest ();
xhr.open ("get", "http://segmentfault.com/u/trigkit4/",true);
xhr.send ();
</cript>
La différence entre le code et la précédente est que le chemin relatif est remplacé par le chemin absolu des autres domaines, c'est-à-dire l'adresse d'interface auquel vous souhaitez accéder à travers les domaines.
La prise en charge côté serveur de CORS est principalement réalisée en définissant l'origine accès à l'allow-allow-origin. Si le navigateur détecte les paramètres correspondants, AJAX peut être autorisé à accéder à des domaines.
Pour résoudre les problèmes de domaine croisé, nous pouvons utiliser les méthodes suivantes:
Domain croisé via JSONP
Maintenant, la question est? Qu'est-ce que JSONP? La définition de Wikipedia est: JSONP (JSON avec padding) est un "mode d'utilisation" du format de données JSON, qui permet aux pages Web de demander des informations à d'autres domaines.
JSONP est également appelé remplissage JSON. Il s'agit d'une nouvelle méthode pour appliquer JSON, mais c'est juste un JSON inclus dans les appels de fonction, par exemple:
La copie de code est la suivante:
callback ({"name", "trigkit4"});
JSONP se compose de deux parties: fonction et données de rappel. Une fonction de rappel est une fonction qui doit être appelée sur la page lorsque la réponse arrive, et les données sont les données JSON transmises dans la fonction de rappel.
Dans JS, il n'est pas possible de demander directement des données sur différents domaines à l'aide de XMLHTTPRequest. Cependant, il est acceptable d'introduire des fichiers de script JS sur différents domaines de la page, et JSONP utilise cette fonctionnalité pour le réaliser. Par exemple:
La copie de code est la suivante:
<script type = "text / javascript">
fonction dosomething (jSondata) {
// traite les données JSON obtenues
}
</cript>
<script src = "http://example.com/data.php?callback=dosomething"> </ script>
Une fois le fichier JS chargé avec succès, la fonction que nous avons spécifiée dans le paramètre URL sera exécutée et les données JSON dont nous avons besoin seront transmises en tant que paramètres. Par conséquent, JSONP exige que la page côté serveur coopère en conséquence.
La copie de code est la suivante:
<? Php
$ callback = $ _get ['callback']; // Obtenez le nom de la fonction de rappel
$ data = array ('a', 'b', 'c'); // les données à retourner
ECHO $ RAPPEL.
?>
Enfin, la sortie est: dosomething (['a', 'b', 'c']);
Si votre page utilise jQuery, la méthode d'encapsulation peut être utilisée pour effectuer des opérations JSONP très commodément.
La copie de code est la suivante:
<script type = "text / javascript">
$ .getjson ('http://example.com/data.php?callback=?,function (jSondata)') {
// traite les données JSON obtenues
});
</cript>
JQuery générera automatiquement une fonction globale pour remplacer le point d'interrogation dans callback =?, puis il détruira automatiquement les données après l'avoir obtenue. En fait, il joue le rôle d'une fonction d'agent temporaire. La méthode $ .getjson déterminera automatiquement si elle est un domaine croisé. S'il n'est pas du domaine croisé, il appellera la méthode Ajax ordinaire; S'il est transversal, il appellera la fonction de rappel JSONP sous forme de chargement asynchrone des fichiers JS.
Pour les avantages et les inconvénients de JSONP
Les avantages de JSONP sont: il n'est pas limité par des politiques homologues comme la demande AJAX mise en œuvre par l'objet XMLHTTPRequest; Il a une meilleure compatibilité et peut fonctionner dans des navigateurs plus anciens, sans le support de XMLHTTPRequest ou ActiveX; Et une fois la demande terminée, le résultat peut être renvoyé en appelant le rappel.
L'inconvénient de JSONP est qu'il ne prend en charge que les demandes de GET et non d'autres types de demandes HTTP telles que Post; Il ne prend en charge que les demandes HTTP inter-domaines et ne peut pas résoudre le problème de la façon de passer des appels JavaScript entre deux pages dans différents domaines.
Comparaison entre CROS et JSONP
Par rapport à JSONP, CORS est sans aucun doute plus avancé, pratique et fiable.
1. JSONP ne peut implémenter que les demandes GET, tandis que CORS prend en charge tous les types de demandes HTTP.
2. À l'aide de COR, les développeurs peuvent utiliser XMLHTTPRequest ordinaire pour lancer des demandes et obtenir des données, qui ont une meilleure gestion des erreurs que JSONP.
3. JSONP est principalement soutenu par les anciens navigateurs. Ils ne soutiennent souvent pas les COR et la plupart des navigateurs modernes soutiennent déjà les COR).
Croix-subdomain en modifiant le document.domain
Les navigateurs ont une politique homologue, et l'une de ses limites est que dans la première méthode, nous avons dit que les documents provenant de différentes sources ne peuvent pas être demandés par le biais de la méthode AJAX. Sa deuxième limitation est que l'interaction JS ne peut pas être effectuée entre les cadres de différents domaines du navigateur.
Différents cadres peuvent obtenir des objets de fenêtre, mais ils ne peuvent pas obtenir des propriétés et des méthodes correspondantes. Par exemple, il y a une page avec l'adresse de http://www.example.com/a.html. Il y a un iframe dans cette page, et son SRC est http://example.com/b.html. De toute évidence, cette page a un domaine différent du framework iframe à l'intérieur, nous ne pouvons donc pas obtenir des choses dans l'IFRAME en écrivant du code JS dans la page:
La copie de code est la suivante:
<script type = "text / javascript">
fonction test () {
var iframe = document.getElementById ('ifame');
var win = document.contentwindow; // vous pouvez obtenir l'objet de fenêtre dans le nom iframe, mais les propriétés et les méthodes de l'objet de fenêtre sont presque indisponibles
var doc = win.Document; // L'objet de document dans l'IFRAME ne peut pas être obtenu ici
var name = win.name; // L'attribut de nom de l'objet Window ne peut pas être obtenu ici
}
</cript>
<iframe id = "iframe" src = "http://example.com/b.html" onload = "test ()"> </ iframe>
À l'heure actuelle, Document.Domain peut être utile. Nous avons juste besoin de définir Document.Domain des deux pages: http://www.example.com/a.html et http://example.com/b.html au même nom de domaine. Mais il convient de noter que le réglage du document.domain est limité. Nous ne pouvons définir Document.Domain que dans son propre domaine parent ou supérieur, et le domaine principal doit être le même.
1. Définir document.domain dans la page http://www.example.com/a.html:
La copie de code est la suivante:
<iframe id = "iframe" src = "http://example.com/b.html" onload = "test ()"> </ iframe>
<script type = "text / javascript">
document.domain = 'example.com'; // Définir le domaine principal
fonction test () {
alert (document.getElementById ('iframe'). ContentWindow); // ContentWindow peut obtenir l'objet de fenêtre de la fenêtre enfant
}
</cript>
2. Définir également document.domain dans la page http://example.com/b.html:
La copie de code est la suivante:
<script type = "text / javascript">
document.domain = 'example.com'; // Chargez cette page dans iframe et définissez document.domain pour en faire la même chose que document.domain sur la page principale
</cript>
La méthode de modification du document.Domain ne convient qu'aux interactions entre les cadres avec différents sous-domaines.