Solutions inter-domaines communes pour le front-end (tous)

Je vois souvent du contenu inter-domaines dans mes études. Cet article fournira des solutions inter-domaines pour le royaume des étoiles.

Solution inter-domaines
1. Inter-domaine via jsonp
2 Document.domain + iframe cross-domain
3. nom + iframe cross-domain
5. postMessage cross-domain
6. Partage de ressources inter-domaines (CORS)
7. proxy nginx cross-domain
8. 🎜>9. Protocole WebSocket Cross-domain
1. Cross-domain via jsonp
Habituellement, afin de réduire la charge du serveur Web, nous séparons les ressources statiques telles que js, css, img, etc. serveur avec un nom de domaine indépendant, puis transmettre la balise correspondante. La balise charge les ressources statiques de différents noms de domaine et est autorisée par le navigateur. Sur la base de ce principe, nous pouvons créer dynamiquement un script puis demander une URL avec des paramètres pour réaliser des croisements. communication de domaine.
1.) Implémentation native :

Le serveur renvoie ce qui suit (la fonction globale est exécutée lors du retour) :

<script> 
  var script = document.createElement(&#39;script&#39;); 
script.type = &#39;text/javascript&#39;; // 传参并指定回调执行函数为onBack script.src = &#39;http://www.domain2.com:8080/login?user=admin&callback=onBack&#39;; document.head.appendChild(script); // 回调执行函数 function onBack(res) {
 alert(JSON.stringify(res)); 
} </script>

onBack({"status": true, "user": "admin"})
2.）jquery ajax：
$.ajax({ url: 'http://www.domain2.com:8080/login', type: 'get', dataType: 'jsonp', // 请求方式为jsonp jsonpCallback: "onBack", // 自定义回调函数名 data: {}});

Code backend node.js exemple :

3.）vue.js：
this.$http.jsonp('http://www.domain2.com:8080/login', { params: {}, jsonp: 'onBack'}).then((res) => { console.log(res); })

jsonp Inconvénients : un seul type de requête get peut être implémenté.

var querystring = require('querystring');var http = require('http');var server = http.createServer();
server.on('request', function(req, res) {var params = qs.parse(req.url.split('?')[1]); 
var fn = params.callback; // jsonp返回设置 res.writeHead(200, { 'Content-Type': 'text/javascript' }); 
res.write(fn + '(' + JSON.stringify(params) + ')'); 
res.end();});
server.listen('8080');console.log('Server is running at port 8080...');

2. document.domain + iframe cross-domain

Cette solution est limitée aux scénarios d'application multi-domaines où le domaine principal est le même mais les sous-domaines sont différents.
Principe de mise en œuvre : les deux pages définissent de force document.domain comme domaine principal de base via js, obtenant ainsi le même domaine.
1.) Fenêtre parent : (http://www.domain.com/a.html))

2.) Fenêtre enfant : ([http://child.domain. com/b.html)

<iframe id="iframe" src="http://child.domain.com/b.html"></iframe><script> document.domain = &#39;domain.com&#39;; var user = &#39;admin&#39;;</script>

3. Location.hash + iframe cross-domain

<script> document.domain = &#39;domain.com&#39;; // 获取父窗口中变量 alert(&#39;get js data from parent ---> &#39; + window.parent.user);</script>

Principe de mise en œuvre : Si a souhaite communiquer avec b à travers les domaines, cela se fait via la page intermédiaire c. Pour trois pages, le location.hash de l'iframe est utilisé pour transférer des valeurs entre différents domaines, et l'accès direct js est utilisé pour communiquer entre les mêmes domaines.

Implémentation spécifique : Domaine A : a.html -> Domaine B : b.html -> Domaine A : c.html, les différents domaines a et b ne peuvent communiquer que dans un sens, via les valeurs de hachage, b et c le sont. de plus, des domaines différents ne peuvent communiquer que dans une seule direction, mais c et a sont dans le même domaine, donc c peut accéder à tous les objets de la page a via parent.parent.
1.) a.html : ([http://www.domain1.com/a.html)]

// Ouvrir la fonction de méthode de rappel onCallback du même domaine c .html (res) { alert('data from c.html ---> ' + res }

<iframe id="iframe" src="http://www.domain2.com/b.html" style="display:none;"></iframe><script> var iframe = document.getElementById(&#39;iframe&#39;); 
// 向b.html传hash值 setTimeout(function() {
 iframe.src = iframe.src + &#39;#user=admin&#39;; 
}, 1000);

2.) b.html : (http:/ /www .domain2.com/b.html))