Partager des exemples d'utilisation de js pour résoudre des problèmes inter-domaines

Qu'est-ce que le cross-domain ? Tant que le protocole, le nom de domaine ou le port sont différents, ils sont considérés comme des domaines différents.

URL                      说明       是否允许通信
http://www.a.com/a.jshttp://www.a.com/b.js    
 同一域名下   
 允许http://www.a.com/lab/a.jshttp://www.a.com/script/b.js 同一域名下不同文件夹 
 允许http://www.a.com:8000/a.jshttp://www.a.com/b.js     同一域名，不同端口  
 不允许http://www.a.com/a.jshttps://www.a.com/b.js 同一域名，不同协议 
 不允许http://www.a.com/a.jshttp://70.32.92.74/b.js 域名和域名对应ip 
 不允许http://www.a.com/a.jshttp://script.a.com/b.js 主域相同，子域不同 
 不允许http://www.a.com/a.jshttp://a.com/b.js 同一域名，不同二级域名（同上） 
 不允许（cookie这种情况下也不允许访问）http://www.cnblogs.com/a.jshttp://www.a.com/b.js 
 不同域名 不允许

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 CORS (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 CORS 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.

<script type="text/javascript">
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "/trigkit4",true);
    xhr.send();</script>

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

<script type="text/javascript">
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "http://segmentfault.com/u/trigkit4/",true);
    xhr.send();</script>

La différence entre le code et le précédent. La première est que le chemin relatif est remplacé par le chemin absolu des autres domaines, c'est-à-dire 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 le problème inter-domaines, nous pouvons utiliser les méthodes suivantes :

Inter-domaine via jsonp

Maintenant le problème ? 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. Il s'agit simplement de JSON inclus dans les appels de fonction, par exemple :

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

JSONP se compose de deux parties : Fonction de rappel. et des 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 dans différents domaines. Cependant, il est possible d'introduire des fichiers de script js provenant de différents domaines sur la page, et jsonp utilise cette fonctionnalité pour y parvenir. Par exemple :

<script type="text/javascript">
    function dosomething(jsondata){        //处理获得的json数据
    }</script><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ètre. Par conséquent, jsonp nécessite une coopération correspondante de la part de la page côté serveur.

<?php$callback = $_GET[&#39;callback&#39;];//得到回调函数名$data = array(&#39;a&#39;,&#39;b&#39;,&#39;c&#39;);//要返回的数据echo $callback.&#39;(&#39;.json_encode($data).&#39;)&#39;;//输出?>

Enfin, le résultat de sortie est : dosomething(['a','b','c']);

Si votre page utilise jquery, alors elle est encapsulée par Cette méthode rend très pratique l'exécution d'opérations jsonp.

<script type="text/javascript">
    $.getJSON(&#39;http://example.com/data.php?callback=?,function(jsondata)&#39;){        //处理获得的json数据
    });</script>

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

Les avantages de JSONP sont : il n'est pas limité par la même politique d'origine comme la requête Ajax implémentée par l'objet XMLHttpRequest, il a une meilleure compatibilité et peut être utilisé ; dans les navigateurs plus anciens, il peut s'exécuter sur n'importe quel serveur et ne nécessite pas la prise en charge de XMLHttpRequest ou d'ActiveX et une fois la requête terminée, le résultat peut être renvoyé en appelant un rappel ;

Les inconvénients de JSONP sont : il ne prend en charge que les requêtes GET mais pas les 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 façon dont deux pages de domaines différents interagissent avec les uns les autres. Problèmes lors des appels JavaScript.

La comparaison entre CORS et JSONP

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

    1、 JSONP只能实现GET请求，而CORS支持所有类型的HTTP请求。
    2、 使用CORS，开发者可以使用普通的XMLHttpRequest发起请求和获得数据，比起JSONP有更好的错误处理。
    3、 JSONP主要被老的浏览器支持，它们往往不支持CORS，而绝大多数现代浏览器都已经支持了CORS）。

Traverser les sous-domaines en modifiant document.domain

Les navigateurs ont une politique de même origine, et l'une de ses limites est que dans la première méthode, nous avons dit qu'il ne pouvait pas transmettre la méthode ajax pour demander documents provenant de différentes sources. Sa deuxième limitation est que js ne peut pas interagir entre les frames de différents domaines du navigateur.
Les objets Window peuvent être obtenus 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, ceci. La page et l'iframe qu'elle contient se trouvent dans des domaines différents, nous ne pouvons donc pas obtenir les éléments de l'iframe en écrivant du code js dans la page :

<script type="text/javascript">
    function test(){        var iframe = document.getElementById(&#39;ifame&#39;);        var win = document.contentWindow;//可以获取到iframe里的window对象，但该window对象的属性和方法几乎是不可用的
        var doc = win.document;//这里获取不到iframe里的document对象
        var name = win.name;//这里同样获取不到window对象的name属性
    }</script><iframe id = "iframe" src="http://example.com/b.html" onload = "test()"></iframe>

Pour le moment, document.domain peut s'avérer utile. Il suffit de définir le document.domain des deux pages http://www.example.com/a.html et http://example.com/b.html 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.在页面 http://www.example.com/a.html 中设置document.domain:

<iframe id = "iframe" src="http://example.com/b.html" onload = "test()"></iframe><script type="text/javascript">
    document.domain = &#39;example.com&#39;;//设置成主域
    function test(){
        alert(document.getElementById(&#39;iframe&#39;).contentWindow);//contentWindow 可取得子窗口的 window 对象
    }</script>

2.在页面 http://example.com/b.html 中也设置document.domain:

<script type="text/javascript">
    document.domain = &#39;example.com&#39;;//在iframe载入这个页面也设置document.domain，使之与主页面的document.domain相同</script>

修改document.domain的方法只适用于不同子域的框架间的交互。

使用window.name来进行跨域

window对象有个name属性，该属性有个特征：即在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的，每个页面对window.name都有读写的权限，window.name是持久存在一个窗口载入过的所有页面中的

使用HTML5的window.postMessage方法跨域

window.postMessage(message,targetOrigin) 方法是html5新引进的特性，可以使用它来向其它的window对象发送消息，无论这个window对象是属于同源或不同源，目前IE8+、FireFox、Chrome、Opera等浏览器都已经支持window.postMessage方法。

相关推荐：

php关于ajax跨域问题解析

关于javascript中跨域问题的解决办法分享

关于js跨域问题的总结

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!