Résumé du code du problème inter-domaines 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.

URL                      说明       是否允许通信

http://www.a.com/a.js

http://www.a.com/b.js     同一域名下   允许

http://www.a.com/lab/a.js

http://www.a.com/script/b.js 同一域名下不同文件夹 允许

http://www.a.com:8000/a.js

http://www.a.com/b.js     同一域名，不同端口  不允许

http://www.a.com/a.js

https://www.a.com/b.js 同一域名，不同协议 不允许

http://www.a.com/a.js

http://70.32.92.74/b.js 域名和域名对应ip 不允许

http://www.a.com/a.js

http://script.a.com/b.js 主域相同，子域不同 不允许

http://www.a.com/a.js

http://a.com/b.js 同一域名，不同二级域名（同上） 不允许（cookie这种情况下也不允许访问）

http://www.cnblogs.com/a.js

http://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)

CORS（Cross-Origin Resource Sharing) Le partage de ressources inter-domaines 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 raison en 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.

La prise en charge côté serveur de CORS est principalement obtenue 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, qui est simplement du JSON inclus dans les appels de fonction, par exemple :

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

JSONP se compose de deux parties. : fonction de rappel et 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 :

<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, vous pouvez facilement effectuer des opérations jsonp grâce à sa méthode d'encapsulation.

<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 le détruira automatiquement 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 de jsonp. sous forme de chargement asynchrone de fichiers 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 sa compatibilité est meilleure et il ; est plus ancien. Il peut s'exécuter dans tous les navigateurs et ne nécessite pas de support XMLHttpRequest ou 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 pour passer des JavaScript appels.

La comparaison entre CORS 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 ne prennent souvent pas en charge CORS, alors que la plupart des navigateurs modernes prennent déjà en charge 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.

Différents frameworks peuvent obtenir l'objet window, mais ils ne peuvent pas obtenir les propriétés et méthodes correspondantes. Par exemple, il y a une page dont l'adresse est http://www.php.cn/. Il y a un iframe dans cette page, et son src est http://www.php.cn/. Évidemment, cette page et le cadre iframe qu'elle contient sont donc dans des domaines différents. on ne peut pas mettre les choses dans 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>

这个时候，document.domain就可以派上用场了，我们只要把http://www.php.cn/ 和 http://www.php.cn/这两个页面的document.domain都设成相同的域名就可以了。但要注意的是，document.domain的设置是有限制的，我们只能把document.domain设置成自身或更高一级的父域，且主域必须相同。

1.在页面 http://www.php.cn/ 中设置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://www.php.cn/ 中也设置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方法。

 以上就是JavaScript跨域问题代码总结的内容，更多相关内容请关注PHP中文网（www.php.cn）！