Gängige domänenübergreifende Lösungen für das Frontend (alle)

Ich sehe in meinen Studien oft domänenübergreifende Inhalte. In diesem Artikel werden domänenübergreifende Lösungen für das Sternenreich vorgestellt.

Domänenübergreifende Lösung
1. Domänenübergreifend über jsonp
2. Domänenübergreifend mit iframe
4. name + iframe domänenübergreifend
6. domänenübergreifendes Nginx-Proxy
8 🎜>9. WebSocket-Protokoll domänenübergreifend
1. Um die Belastung des Webservers zu reduzieren, trennen wir normalerweise statische Ressourcen wie js, css, img usw Server mit einem unabhängigen Domänennamen und übergeben Sie dann die entsprechenden Tags. Laden Sie statische Ressourcen von verschiedenen Domänennamen und lassen Sie sie vom Browser zu. Basierend auf diesem Prinzip können wir dynamisch ein Skript erstellen und dann eine URL mit Parametern anfordern, um Cross- zu erreichen. Domänenkommunikation.
1.) Native Implementierung:

<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>

Der Server gibt wie folgt zurück (die globale Funktion wird bei der Rückkehr ausgeführt):

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

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

Backend node.js Codebeispiel:

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...');

Nachteile von JSONP: Es kann nur eine Art von Get-Anfrage implementieren.

2. document.domain + iframe domänenübergreifend

Diese Lösung ist auf domänenübergreifende Anwendungsszenarien beschränkt, bei denen die Hauptdomäne dieselbe ist, die Unterdomänen jedoch unterschiedlich sind.

Implementierungsprinzip: Beide Seiten legen document.domain über js zwangsweise als grundlegende Hauptdomäne fest und erreichen so dieselbe Domäne.

1.) Übergeordnetes Fenster: (http://www.domain.com/a.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>

2.) Untergeordnetes Fenster: ([http://child.domain.com/ b.html)

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

3. location.hash + iframe domänenübergreifend
Implementierungsprinzip: a möchte über die Zwischenseite c domänenübergreifend mit b kommunizieren. Für drei Seiten wird der location.hash von iframe verwendet, um Werte zwischen verschiedenen Domänen zu übertragen, und der direkte JS-Zugriff wird für die Kommunikation zwischen denselben Domänen verwendet.

Spezifische Implementierung: A-Domäne: a.html -> B-Domäne: b.html -> Auch verschiedene Domänen können nur in eine Richtung kommunizieren, aber c und a befinden sich in derselben Domäne, sodass c über parent.parent auf alle Objekte auf der a-Seite zugreifen kann.

1.) a.html: ([http://www.domain1.com/a.html)]

<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);

// Callback-Methodenfunktion onCallback(res) öffnet sich für dieselbe Domain c. html ) { Alert('data from c.html ---> ' + res); }


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