Problèmes inter-domaines dans js

Le contenu de cet article concerne les problèmes inter-domaines de js. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer

. L'exemple de code se trouve à l'adresse E/AjaxGGW/Pour les problèmes inter-domaines, reportez-vous aux nuggets de favoris (face correctement au cross-domain, pas de panique)

1. Cross-domaine : le navigateur ne peut pas exécuter de scripts provenant d'autres sites Web. Cela est dû à la politique Même origine du navigateur qui est parcourue. Restrictions de sécurité implémenté par le serveur sur JavaScript

2 La politique de même origine restreint les comportements suivants :

• Les cookies, LocalStorage et IndexDB ne peuvent pas être lus

• Les objets DOM et JS ne peuvent pas être obtenus

• La requête Ajax ne peut pas être envoyée

3 Scénarios inter-domaines courants
Même origine : même nom de domaine, même protocole et même port

• http://www.nealyang.cn/index.html

  Appel http://www.nealyang.cn/server.php Non croisé -domain

• http://www.nealyang.cn/index.htmlAppel http://www.neal.cn/server.php Cross-domaine, différents domaines principaux

• http://abc.nealyang.cn/index.html Appel http://def.neal.cn/server.php Cross domaines , les noms de sous-domaines sont différents

• http://www.nealyang.cn:8080/index.html

  Appel http://www.nealyang.cn/server.php Cross-domaine, différents ports

• https ://www.nealyang.cn/index.html

  Appel http://www.nealyang.cn/server.php Inter-domaine , différents protocoles

4 Solution inter-domaines

1)

jsonp inter-domaines

Dans la page HTMLcharger des fichiers de ressources statiques à partir de différents noms de domaine via les balises correspondantes est autorisé par le navigateur. Généralement, nous pouvons créer dynamiquement la balise script , puis demander une URL avec des paramètres pour réaliser une communication inter-domaines.

Cependant, le plus gros défaut est que seul obtient la demande

$(function(){
/*jQuery支持jsonp的实现方式  */
$.ajax({
url:"www.baidu.com",
type:"GET",
dataType:"jsonp",  //请求方式为：jsonp
jsonpCallback:"callback",
data:{
"username":"yaofan"
}
})
})

2) document.domain + iframe cross-domain (1.html et document.domain+iframe cross-domain.html)

L'exigence la plus importante est que le nom de domaine principal soit le même, et deux pages html sont requises

<!-- 这种方式最主要的要求是主域名相同,假设目前a.nealyang.cn和b.nealyang.cn分别对应指定不同的ip服务器
a.nealyang.cn下有一个test.html文件
b.nealyang.cn下有一个1.html文件
  -->
 <p>A页面</p> 
 <!-- 利用iframe加载其他域下的文件 ，src中 -->
<iframestyle = "display:none" name = "iframe1" id = "iframe" src = "http://b.nealyang.cn/1.html" frameborder = "0">
     </iframe>  
     <script type="text/javascript">
     $(function(){
     try{
     document.domain = "nealyang.cn" //将document.domain设置为nealyang.cn，当iframe加载完毕后就可以获取nealyang.cn域下的全局对象
     }catch(e){
     $("#iframe").load(function(){
   var jq = document.getElementById("iframe").contentWindow.$; 
    jq.get("http://nealyang.cn/test.json",function(data){
     console.log(data);
     });
     })
     }
     })
     </script>

3)window.name + iframe Cross-domain (origin.html et target.html ne sont pas dans les Nuggets)

Attribut window.name Peut définir ou renvoyer une chaîne stockant le nom de la fenêtre. Sa magie est que la valeur du nom existera toujours lorsqu'elle sera chargée dans différentes pages ou différents domaines. Elle ne changera pas sans modification, et elle peut stocker des noms très longs (2 Mo)

Supposons que la page d'index demande des données sur le serveur distant. Nous créons une balise iframe sous la page. Le src de l'iframe pointe vers l'adresse du fichier du serveur (la balise iframe src peut traverser le domaine de la fenêtre). est défini dans la valeur .name du fichier du serveur, puis lisez la valeur de window.name dans l'iframe dans index.html

Si le index.html page et la page Si le src de l'iframe ne provient pas d'une source différente, vous ne pouvez rien opérer dans le cadre. Les deux pages se trouvent dans des domaines différents et la page source ne peut pas obtenir la valeur de nom de la page cible, car la valeur de nom n'est visible que par les pages du même domaine.

4) Location.hash + iframe cross-domain

Cette méthode inter-domaines est similaire à celle présentée ci-dessus. Elle insère également dynamiquement un iframe, puis définit son src comme adresse du serveur. Le serveur génère également un code js et termine la transmission des données via la communication avec l'enfant. fenêtre. .

Et location.hash est en fait le point d'ancrage de l'URL. Par exemple, après avoir ouvert l'URL de http://www.nealyang.cn#Nealyang. , saisissez-le dans l'emplacement de la console.hash renverra le champ #Nealyang.

[Note] En fait, location.hash et window.hash sont similaires. Ce sont deux méthodes qui utilisent des propriétés d'objet globales, et ces deux méthodes le sont également. la même chose que jsop La même chose est que seules les requêtes get peuvent être implémentées

<script type="text/javascript">
function getData(url,fn){
var iframe = document.createElement("iframe");
iframe.style.display = "none";
iframe.src = url;
iframe.onload = function(){
fn(iframe.contentWindow.location.hash.substring(1));
window.location.hash = "";
document.body.removeChild(iframe);
};
document.body.removeChild(iframe);
}
//get data from server
var url = "http://localhost:8080/data.php";
getData(url,function(data){
var jsondata = JSON.parse(data);
console.log(jsondata.name + "" +jsondata.age);
});
</script>

5) postMessage inter-domaines ( a.html et b.html)

Il s'agit d'une API sympa proposée par H5, comprenant la méthode postMessage pour l'envoi d'informations et le Heure du message pour recevoir des informations.

① 发送信息的postMessage方法是向外界窗口发送信息

otherWindow.postMessage(message,targetOrigin);

l otherWindow指的是目标窗口，是window.frames属性的成员或者是window.open方法创建的窗口。

l Message是要发送的消息，类型是String、Object

l targetOringin是限定消息接收范围，不限制用星号*

② 接受信息的message事件

var onmessage = function(event){
var data = event.data;
var origin = event.origin;
}
if(typeof window.addEventListener != 'undefined'){
    window.addEventListener('message',onmessage,false);
}else if(typeof window.attachEvent != 'undefined'){
    window.attachEvent('onmessage', onmessage);
}

6) 跨域资源共享CORS

目前主流的跨域解决方案

1）简介

CORS是一个W3C标准，全称是“跨域资源共享”（Cross-origin resource sharing）。它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而客服了AJAX只能同源使用的限制。

CORS需要浏览器和服务器同时支持。

整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。

相关推荐：

JS跨域处理详解

js跨域请求服务实例分析

关于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!