Une brève analyse des problèmes inter-domaines js et une comparaison des avantages et des inconvénients des compétences solutions_javascript

Qu'est-ce que le cross-domain ?

Concept : tant que le protocole, le nom de domaine et le port sont différents, ils sont considérés comme des domaines différents.

Copier le code Le code est le suivant :

L'URL explique 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.jsMême nom de domaine, différents ports non autorisés
http://www.a.com/a.js
https://www.a.com/b.js Même nom de domaine, protocoles différents non autorisés
http://www.a.com/a.js
http://70.32.92.74/b.js Le nom de domaine et l'IP correspondant au nom de domaine 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 les sous-domaines sont différents Non autorisé
http://www.a.com/a.js
http://a.com/b.js Même nom de domaine, noms de domaine de deuxième niveau différents (comme ci-dessus) Non autorisé (l'accès aux cookies n'est pas autorisé 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

Les différences dans les ports et les protocoles ne peuvent être résolues qu'en arrière-plan.

Partage de ressources inter-origines (CORS)

Le partage de ressources inter-domaines CROS (Cross-Origin Resource Sharing) définit la manière dont le navigateur et le serveur doivent communiquer lors de l'accès aux ressources inter-domaines. L'idée de base derrière CROS est d'utiliser des en-têtes HTTP personnalisés pour permettre au navigateur de communiquer avec le serveur afin de déterminer si la demande ou la réponse doit réussir ou échouer.

Copier le code Le code est le suivant :

Le trigkit4 ci-dessus est un chemin relatif Si nous voulons utiliser CORS, le code Ajax pertinent peut ressembler à ceci :

Copier le code Le code est le suivant :

La différence entre le code et le précédent est que le chemin relatif est remplacé par le chemin absolu des autres domaines, qui est l'adresse d'interface à laquelle vous souhaitez accéder entre les domaines.

Le côté serveur prend en charge CORS principalement en définissant Access-Control-Allow-Origin. Si le navigateur détecte les paramètres correspondants, il peut autoriser l'accès inter-domaines Ajax.

Pour résoudre les problèmes inter-domaines, nous pouvons utiliser les méthodes suivantes :

Cross domaine via jsonp

Maintenant la question se pose ? Qu’est-ce que jsonp ? La définition de Wikipédia est la suivante : JSONP (JSON with Padding) est un "mode d'utilisation" du format de données JSON, qui permet aux pages Web de demander des données à d'autres domaines.

JSONP, également appelé JSON rembourré, est une nouvelle méthode d'application de JSON, qui est simplement du JSON inclus dans les appels de fonction, par exemple :

Copier le code Le code est le suivant :

rappel({"name","trigkit4"});

JSONP se compose de deux parties : la fonction de rappel et les données. La fonction de rappel est la fonction qui doit être appelée dans la page lorsque la réponse arrive, et les données sont les données JSON transmises à la fonction de rappel.

En js, il n'est pas possible d'utiliser directement XMLHttpRequest pour demander des données sur différents domaines. Cependant, il est possible d'introduire des fichiers de script js provenant de différents domaines sur la page. jsonp utilise cette fonctionnalité pour y parvenir. Par exemple :

Copier le code Le code est le suivant :

jquery générera automatiquement une fonction globale pour remplacer le point d'interrogation dans callback=?, puis il sera automatiquement détruit après avoir obtenu les données. En fait, il agit comme une fonction proxy temporaire. La méthode $.getJSON déterminera automatiquement si elle est inter-domaine. Si elle n'est pas inter-domaine, elle appellera la méthode ajax ordinaire ; si elle est inter-domaine, elle appellera la fonction de rappel jsonp sous forme asynchrone. chargement du fichier js.

Avantages et inconvénients de JSONP

L'avantage de JSONP est qu'il n'est pas limité par la politique de même origine comme la requête Ajax implémentée par l'objet XMLHttpRequest ; il a une meilleure compatibilité et peut s'exécuter dans les navigateurs plus anciens sans le support de XMLHttpRequest ou d'ActiveX ; La requête est terminée, le résultat peut être renvoyé en appelant le rappel.

Les inconvénients de JSONP sont les suivants : il ne prend en charge que les requêtes GET et non d'autres types de requêtes HTTP telles que POST ; il ne prend en charge que les requêtes HTTP inter-domaines et ne peut pas résoudre le problème de la manière d'effectuer des appels JavaScript entre deux pages dans des domaines différents.

Comparaison entre CROS et JSONP

CORS est sans aucun doute plus avancé, pratique et fiable que JSONP.

1. JSONP ne peut implémenter que les requêtes GET, tandis que CORS prend en charge tous les types de requêtes HTTP.

2. Grâce à CORS, les développeurs peuvent utiliser XMLHttpRequest ordinaire pour lancer des requêtes et obtenir des données, ce qui offre une meilleure gestion des erreurs que JSONP.

3. JSONP est principalement pris en charge par les anciens navigateurs, qui souvent ne prennent pas en charge CORS, et la plupart des navigateurs modernes prennent déjà en charge CORS).
Traversez les sous-domaines en modifiant document.domain

Les navigateurs ont tous une politique de même origine, et l'une de ses limites est que dans la première méthode, nous avons dit que vous ne pouvez pas utiliser ajax pour demander des documents provenant de sources différentes. Sa deuxième limitation est que js ne peut pas interagir entre les frames de différents domaines du navigateur.
L'objet window peut être obtenu entre différents frameworks, mais les propriétés et méthodes correspondantes ne peuvent pas être obtenues. Par exemple, il y a une page dont l'adresse est http://www.example.com/a.html Il y a une iframe dans cette page, et son src est http://example. .com/b.html, évidemment, cette page et l'iframe qu'elle contient sont dans des domaines différents, nous ne pouvons donc pas obtenir le contenu de l'iframe en écrivant du code js dans la page :

Copier le code Le code est le suivant :

Pour le moment, document.domain peut s'avérer utile. Il suffit d'ajouter http://www.example.com/a.html et http://example.com. / b.htmlIl suffit de définir le document.domain de ces deux pages sur le même nom de domaine. Mais il convient de noter que le paramétrage de document.domain est limité. Nous ne pouvons définir document.domain que sur lui-même ou sur un domaine parent de niveau supérieur, et le domaine principal doit être le même.

1. Définissez document.domain: dans la page http://www.example.com/a.html

Copier le code Le code est le suivant :

2. Définissez également document.domain: dans la page http://example.com/b.html

Copier le code Le code est le suivant :

La méthode de modification de document.domain n'est applicable qu'aux interactions entre les frames de différents sous-domaines.