Acht Implementierungslösungen für domänenübergreifendes JS-Frontend

Inhaltsverzeichnis

1. JSONP domänenübergreifend
2. document.domain + iframe domänenübergreifend
3. location.hash + iframe domänenübergreifend
4. window.name + iframe domänenübergreifend
5. PostMessage domänenübergreifend
6. Cross-Origin-Ressourcenfreigabe (CORS)

Native node.js-Implementierung
koa kombiniert mit koa2-cors Middleware-Implementierung

7. WebSocket-Protokoll domänenübergreifend

8. Nginx-Proxy über Domänengrenzen hinweg

Aufgrund der Einschränkungen der Same-Origin-Policy können nur Skripte mit demselben Ursprung Ressourcen abrufen. Dadurch wird zwar die Netzwerksicherheit gewährleistet, es wird jedoch auch die Ressourcennutzung eingeschränkt.
Wie kann man also domänenübergreifendes Arbeiten erreichen? Hier sind einige Methoden, um domänenübergreifendes Arbeiten zu erreichen.

1. JSONP domänenübergreifend

Prinzip: Der Skript-Tag führt JS-Dateien ein, ohne von Cross-Domains beeinflusst zu werden. Darüber hinaus sind Tags mit src-Attributen von der Same-Origin-Policy nicht betroffen.

Basierend auf dieser Funktion laden wir Ressourcen über das src-Attribut des Skript-Tags und platzieren die Daten im JSON-Format auf dem Server, auf den das src-Attribut verweist.

Da wir den Ladestatus der Quelle des Skripts nicht bestimmen können und nicht wissen, ob die Daten abgerufen wurden, definieren wir die Verarbeitungsfunktion im Voraus. Der Server fügt diesen Funktionsnamen am Anfang der Daten hinzu und ruft, wenn alle Daten geladen sind, die Funktion auf, die wir im Voraus definiert haben. Zu diesem Zeitpunkt sind die an die Funktion übergebenen tatsächlichen Parameter die vom Backend zurückgegebenen Daten.

Hauptseite

<!DOCTYPE html>
<html lang="de">
<Kopf>
  <meta charset="UTF-8">
  <title>Dokument</title>
</Kopf>
<Text>
  <Skript>
    Funktion Rückruf(Daten) {
      Alarm (Datentest);
    }
  </Skript>
  <script src="./jsonp.js"></script>
</body>
</html>

jsonp.js

Rückruf({"test": 0});

Besuchen Sie index.html und das Popup-Fenster zeigt 0
Der Nachteil dieser Lösung besteht darin, dass nur eine Anfrage, get, umgesetzt werden kann.

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

Diese Lösung ist auf Anwendungsszenarien beschränkt, in denen die Hauptdomäne dieselbe ist, die Subdomänen jedoch unterschiedlich sind.

Beispielsweise lautet die Hauptwebseite von Baidu www.baidu.com und Websites wie zhidao.baidu.com und news.baidu.com sind Subdomänen der Hauptdomäne www.baidu.com.

Implementierungsprinzip: Beide Seiten legen über js document.domain als grundlegende primäre Domäne fest, erreichen so dieselbe Domäne und können Ressourcen aufeinander betreiben.

Hauptseite

<!DOCTYPE html>
<html lang="de">
<Kopf>
  <meta charset="UTF-8">
  <title>Dokument</title>
</Kopf>
<Text>
  <iframe src="https://mfaying.github.io/lesson/cross-origin/document-domain/child.html"></iframe>
  <Skript>
    Dokument.Domäne = "mfaying.github.io";
    var t = "0";
  </Skript>
</body>
</html>

Kind.html

<!DOCTYPE html>
<html lang="de">
<Kopf>
  <meta charset="UTF-8">
  <title>Dokument</title>
</Kopf>
<Text>
  <Skript>
    Dokument.Domäne = "mfaying.github.io";
    Alarm (Fenster.übergeordnet.t);
  </Skript>
</body>
</html>

3. location.hash + iframe domänenübergreifend

Wenn die übergeordnete Seite das src-Attribut des Iframes ändert, ändert sich der Wert von location.hash, aber die Seite wird nicht aktualisiert (es ist immer noch dieselbe Seite). Der Wert kann über window.localtion.hash auf der untergeordneten Seite abgerufen werden.

Hauptseite

<!DOCTYPE html>
<html lang="de">
<Kopf>
  <meta charset="UTF-8">
  <title>Dokument</title>
</Kopf>
<Text>
  <iframe src="child.html#" style="anzeige: keine;"></iframe>
  <Skript>
    var oIf = document.getElementsByTagName('iframe')[0];
    document.addEventListener('klicken', Funktion () {
      oWenn.src += '0';
    }, FALSCH);
  </Skript>
</body>
</html>

Kind.html

<!DOCTYPE html>
<html lang="de">
<Kopf>
  <meta charset="UTF-8">
  <title>Dokument</title>
</Kopf>
<Text>
  <Skript>
    fenster.onhashchange = function() {
      Alarm (Fenster.Standort.Hash.Slice (1));
    }
  </Skript>
</body>
</html>

Klicken Sie auf das Popup-Fenster der Seite index.html und es wird 0 angezeigt

4. window.name + iframe domänenübergreifend

Prinzip: Die Eigenschaft window.name bleibt nach dem Laden verschiedener Seiten (sogar unterschiedlicher Domänennamen) bestehen und dem Namen kann ein längerer Wert (2 MB) zugewiesen werden.
Das Namensattribut des Fensters wird auf der Seite mit einem anderen Ursprung als dem des Iframes festgelegt, und dann wird der Iframe auf die Seite mit demselben Ursprung verwiesen. Zu diesem Zeitpunkt bleibt der Wert des Namensattributs des Fensters unverändert, wodurch eine domänenübergreifende Datenerfassung realisiert wird.

./übergeordnet/index.html

<!DOCTYPE html>
<html lang="de">
<Kopf>
  <meta charset="UTF-8">
  <title>Dokument</title>
</Kopf>
<Text>
  <Skript>
    var oIf = document.createElement('iframe');
    oIf.src = „https://mfaying.github.io/lesson/cross-origin/window-name/child.html“;
    var Zustand = 0;
    oWenn.onload = Funktion () {
      wenn (Zustand === 0) {
        Zustand = 1;
        oIf.src = „https://mfaying.github.io/lesson/cross-origin/window-name/parent/proxy.html“;
      } anders {
        Alarm (JSON.parse (oIf.contentWindow.name).test);
      }
    }
    Dokument.Body.AnhängenUntergeordnetesElement(oIf);
  </Skript>
</body>
</html>

./übergeordnet/proxy.html

Leere Datei, wird nur als Proxy-Seite verwendet

./Kind.html

<!DOCTYPE html>
<html lang="de">
<Kopf>
  <meta charset="UTF-8">
  <title>Dokument</title>
</Kopf>
<Text>
  <Skript>
    Fenstername = '{"test": 0}'
  </Skript>
</body>
</html>

5. PostMessage domänenübergreifend

postMessage wurde von HTML5 vorgeschlagen und kann eine dokumentenübergreifende Nachrichtenübertragung realisieren.
Verwendung
getMessageHTML.postMessage(Daten, Ursprung);
Daten: Jeder Basistyp oder jedes kopierbare Objekt, das von der HTML5-Spezifikation unterstützt wird. Einige Browser unterstützen jedoch nur Zeichenfolgen. Daher empfiehlt es sich, beim Übergeben von Parametern die Serialisierung JSON.stringify() zu verwenden.

Herkunft: Protokoll + Host + Portnummer, kann auch auf "*" gesetzt werden, was bedeutet, dass es an jedes Fenster übergeben werden kann. Wenn Sie denselben Ursprung wie das aktuelle Fenster angeben möchten, setzen Sie es auf "/".
getMessageHTML ist unsere Referenz auf die Seite, von der wir Informationen erhalten möchten. Dies kann die contentWindow-Eigenschaft des Iframes, der Rückgabewert von window.open oder der über den Namen oder Index von window.frames erhaltene Wert sein.

Hauptseite

<!DOCTYPE html>
<html lang="de">
<Kopf>
  <meta charset="UTF-8">
  <title>Dokument</title>
</Kopf>
<Text>
    <iframe id='ifr' src='./child.html' style="display: none;"></iframe>
    <button id='btn'>Klick</button>
    <Skript>
      var btn = document.getElementById('btn');
      btn.addEventListener('klicken', Funktion () {
        var ifr = document.getElementById('ifr');
        ifr.contentWindow.postMessage(0, '*');
      }, FALSCH);
    </Skript>
</body>
</html>

Kind.html

<!DOCTYPE html>
<html lang="de">
<Kopf>
  <meta charset="UTF-8">
  <title>Dokument</title>
</Kopf>
<Text>
    <Skript>
      window.addEventListener('Nachricht', Funktion(Ereignis){
        Alarm(Ereignisdaten);
      }, FALSCH);
    </Skript>
</body>
</html>

Klicken Sie auf die Schaltfläche auf der Seite index.html. In einem Popup-Fenster wird 0 angezeigt.

6. Cross-Origin-Ressourcenfreigabe (CORS)

Domänenübergreifende Anfragen können durch die serverseitige Einstellung von Access-Control-Allow-Origin umgesetzt werden. Handelt es sich um eine Cookie-Anfrage, müssen sowohl das Front-End als auch das Back-End festgelegt werden.
Aufgrund der Einschränkungen der Same-Origin-Policy ist das gelesene Cookie das Cookie der Domäne, in der sich die domänenübergreifende Anforderungsschnittstelle befindet, und nicht das Cookie der aktuellen Seite.
CORS ist derzeit die gängigste domänenübergreifende Lösung.

Native node.js-Implementierung

Hauptseite

<!DOCTYPE html>
<html lang="de">
<Kopf>
  <meta charset="UTF-8">
  <title>Dokument</title>
  <Skript
    src="https://code.jquery.com/jquery-3.4.1.min.js"
    Integrität="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
    crossorigin="anonym"></script>
</Kopf>
<Text>
  <Skript>
    $.get('http://localhost:8080', Funktion (Daten) {
      Alarm (Daten);
    });
  </Skript>
</body>
</html>

server.js

var http = erforderlich('http');
var server = http.createServer();

server.on('Anfrage', Funktion(req, res) {
  res.writeHead(200, {
    'Access-Control-Allow-Credentials': 'true', // Das Backend erlaubt das Senden von Cookies
    'Access-Control-Allow-Origin': 'https://mfaying.github.io', // Domänen, denen Zugriff gestattet ist (Protokoll + Domänenname + Port)
    „Set-Cookie“: „key=1;Path=/;Domain=mfaying.github.io;HttpOnly“ // HttpOnly: Skripte können keine Cookies lesen
  });

  res.write(JSON.stringify(req.method));
  res.ende();
});

server.listen('8080');
console.log('Der Server läuft auf Port 8080...');

koa kombiniert mit koa2-cors Middleware-Implementierung

Hauptseite

<!DOCTYPE html>
<html lang="de">
<Kopf>
  <meta charset="UTF-8">
  <title>Dokument</title>
  <Skript
    src="https://code.jquery.com/jquery-3.4.1.min.js"
    Integrität="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
    crossorigin="anonym"></script>
</Kopf>
<Text>
  <Skript>
    $.get('http://localhost:8080', Funktion (Daten) {
      Alarm (Daten);
    });
  </Skript>
</body>
</html>

server.js

var koa = erfordern('koa');
var router = erforderlich('koa-router')();
const cors = erfordern('koa2-cors');

var app = neues koa();

app.use(cors({
  Herkunft: Funktion (ctx) {
    wenn (ctx.url === '/test') {
      gibt false zurück;
    }
    zurückkehren '*';
  },
  exhibitHeaders: ['WWW-Authentifizierung', 'Server-Autorisierung'],
  maxAlter: 5,
  Anmeldeinformationen: wahr,
  allowMethods: ['GET', 'POST', 'DELETE'],
  allowHeaders: ['Inhaltstyp', 'Autorisierung', 'Akzeptieren'],
}))

router.get('/', asynchrone Funktion (ctx) {
  ctx.body = "0";
});

App
  .verwenden(router.routes())
  .use(router.allowedMethods());

app.listen(3000);
console.log('Server lauscht auf Port 3000');

7. WebSocket-Protokoll domänenübergreifend

Das WebSocket-Protokoll ist ein neues Protokoll für HTML5. Es ermöglicht eine Vollduplex-Kommunikation zwischen Browser und Server und eine domänenübergreifende Kommunikation, was eine gute Implementierung der serverseitigen Push-Technologie darstellt.

Front-End-Code:

<!DOCTYPE html>
<html lang="de">
<Kopf>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
  <meta http-equiv="X-UA-kompatibel" content="ie=edge">
  <title>Dokument</title>
</Kopf>
<Text>
  <Skript>
    var ws = neuer WebSocket('ws://localhost:8080/', 'Echoprotokoll');
    // Durch Verbindungsaufbau ausgelöstes Ereignis ws.onopen = function () {
      var Daten = { "Test": 1 };
      ws.send(JSON.stringify(data)); // kann Daten an das Backend senden};
 
    // Callback-Methode zum Empfangen einer Nachricht ws.onmessage = function (event) {
      Alarm (JSON.parse (Ereignisdaten) .test);
    }
 
    // Durch Trennung ausgelöstes Ereignis ws.onclose = function () {
      conosle.log('schließen');
    };
  </Skript>
</body>
</html>

server.js

var WebSocketServer = erfordern('websocket').server;
var http = erforderlich('http');
 
var server = http.createServer(Funktion(Anfrage, Antwort) {
  Antwort.writeHead(404);
  Antwort.Ende();
});
server.listen(8080, Funktion() {
  console.log('Server lauscht auf Port 8080');
});
 
wsServer = neuer WebSocketServer({
    httpServer: Server,
    autoAcceptConnections: false
});
 
Funktion HerkunftIstErlaubt(Herkunft) {
  gibt true zurück;
}
 
wsServer.on('Anfrage', Funktion(Anfrage) {
    wenn (!originIsAllowed(request.origin)) {
      Anfrage.Ablehnen();
      console.log('Verbindung vom Ursprung ' + request.origin + ' abgelehnt.');
      zurückkehren;
    }
    
    var Verbindung = Anfrage.Akzeptieren('Echoprotokoll', Anfrage.Ursprung);
    console.log('Verbindung akzeptiert.');
    Verbindung.an('Nachricht', Funktion(Nachricht) {
      wenn (Nachricht.Typ === 'utf8') {
        const reqData = JSON.parse(message.utf8Data);
        reqData.test -= 1;
        Verbindung.sendUTF(JSON.stringify(reqData));
      }
    });
    Verbindung.an('schließen', Funktion() {
      console.log('schließen');
    });
});

8. Nginx-Proxy über Domänengrenzen hinweg

Grundsatz: Die Same-Origin-Policy ist eine Browser-Sicherheitsrichtlinie und nicht Bestandteil des HTTP-Protokolls. Die Serverseite ruft die HTTP-Schnittstelle nur unter Verwendung des HTTP-Protokolls auf und es gibt kein Kreuzungsproblem.

Implementierung: Verwenden Sie nginx, um einen Proxyserver (Domänenname ist derselbe wie bei test1, aber der Port ist anders) als Jump-Server zu konfigurieren, und verwenden Sie einen Reverse-Proxy, um auf die Schnittstelle test2 zuzugreifen. Sie können auch die Testinformationen im Cookie ändern, um das Schreiben des aktuellen Domänencookies zu erleichtern und eine domänenübergreifende Anmeldung zu erreichen.
Spezifische Konfiguration von nginx:

#Proxyserver {
    hören 81;
    Servername www.test1.com;

    Standort / {
        proxy_pass http://www.test2.com:8080; #Reverse-Proxy proxy_cookie_test www.test2.com www.test1.com; #Ändern Sie den Domänennamen im Cookie-Index index.html index.htm;

        add_header Access-Control-Allow-Origin http://www.test1.com; #Wenn das Front-End die Domäne nur ohne Cookies durchquert, kann es * sein.
        add_header Zugriffskontrolle - Anmeldeinformationen zulassen true;
    }
}

Damit ist dieser Artikel über acht Implementierungslösungen für domänenübergreifende Lösungen mit JS-Frontend abgeschlossen. Weitere relevante domänenübergreifende JS-Inhalte finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

Das könnte Sie auch interessieren:

Verwenden Sie jsonp, um domänenübergreifende Probleme perfekt zu lösen
3 gängige Methoden zum domänenübergreifenden Anfordern von Daten in JS
8 Lösungen für das JS-Frontend zur Lösung domänenübergreifender Probleme (neueste und umfassendste)
Javascript-Lösung für domänenübergreifenden Zugriff
Der domänenübergreifende Zugriff auf js-iframes (dieselbe primäre Domäne/nicht dieselbe primäre Domäne) wird ausführlich vorgestellt.
Zusammenfassung von 5 Möglichkeiten zum Umgang mit domänenübergreifenden JS-Problemen
JS Cross-Domain-Lösung: Verwenden Sie CORS, um Cross-Domain zu erreichen

<<: Spezielle Befehle in der MySql-Datenbankabfrage

>>: Detaillierte Erläuterung der Ein- und Ausgabeverwaltung des Linux-Systems und der allgemeinen Funktionen von vim

Lösung für das Problem, dass der Eintrag bei der Installation von mysql5.7.18 nicht gefunden werden kann

React Native meldet den Fehler „Ein Parameter vom Typ ‚NSArray＜id＜RCTBridgeModule＞＞ kann nicht initialisiert werden“ (Lösung)

Artikel

Umfassendes Verständnis der HTML-Grundstruktur

Acht Implementierungslösungen für domänenübergreifendes JS-Frontend

Inhaltsverzeichnis

1. JSONP domänenübergreifend

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

3. location.hash + iframe domänenübergreifend

4. window.name + iframe domänenübergreifend

5. PostMessage domänenübergreifend

6. Cross-Origin-Ressourcenfreigabe (CORS)

Native node.js-Implementierung

koa kombiniert mit koa2-cors Middleware-Implementierung

7. WebSocket-Protokoll domänenübergreifend

8. Nginx-Proxy über Domänengrenzen hinweg

Lösung für das Problem, dass der Eintrag bei der Installation von mysql5.7.18 nicht gefunden werden kann

Detaillierte Erklärung der CocosCreator-Optimierung DrawCall

Analyse des Unterschieds zwischen absolutem und relativem Pfad in HTML

Welche Funktion ist !-- -- im HTML-Seitenstil?

React Native meldet den Fehler „Ein Parameter vom Typ ‚NSArray＜id＜RCTBridgeModule＞＞ kann nicht initialisiert werden“ (Lösung)

Umfassendes Verständnis der HTML-Grundstruktur

CSS-Tutorial: CSS-Attribut-Medientyp

Analyse des Sperrmechanismus der MySQL-Datenbank

Code zum Anzeigen des Inhalts eines TXT-Buchs auf einer Webseite

Informationen zum dynamischen Hinzufügen von Routen basierend auf Benutzerberechtigungen in Vue

Artikel empfehlen

MySQL 5.6.23 Installations- und Konfigurations-Umgebungsvariablen-Tutorial

Analysieren der häufig verwendeten v-Anweisungen in vue.js

Mit CSS3 erstellte Buchseitenumblättereffekte

Beispielanalyse zum Exportieren, Importieren und Kopieren von Docker-Images

Die 9 besten ausländischen Websites mit kostenlosem Bildmaterial

JavaScript zum Hinzufügen und Löschen von Nachrichten im Message Board

Detaillierte Erklärung der node.js-Installation und HbuilderX-Konfiguration

Zusammenfassung der Tests für logische MySQL-Sicherungen und -Wiederherstellungen

el-table in vue realisiert automatischen Deckeneffekt (unterstützt feste)

Starten Sie alle gestoppten Docker-Container mit einem Befehl neu

VMware15/16 Detaillierte Schritte zum Entsperren von VMware und Installieren von MacOS

Ubuntu20.04 VNC-Installation und Konfigurationsimplementierung

CSS3 realisiert den verschiebbaren Zauberwürfel-3D-Effekt

Detaillierte Erläuterung der Javascript-Wissenspunkte

Verstehen Sie die Prinzipien der MySQL-Persistenz und des Rollbacks in einem Artikel