Nginx löst Cross-Domain-Probleme und bindet Seiten von Drittanbietern ein

Vorwort

Unser eigenes System muss einige Komponenten vom Drittanbietersystem laden. Geplant ist, dass ein Drittanbieter entsprechende Schnittstellen entwickelt und bereitstellt. Über diese Schnittstellen beziehen wir Daten und nutzen diese, um entsprechende Funktionen in unserem System umzusetzen.

Leider kam es zu keiner Abstimmung seitens der Führung. Wenn die herkömmliche Methode nicht funktioniert, müssen Sie etwas Ausgefallenes tun.

Wie bereits erwähnt, verwenden wir die Schnittstelle, um Daten abzurufen und erneut zu rendern. Dies ist eine relativ gängige Spielweise. Der Nachteil besteht darin, dass wir zugehörige Module erneut implementieren müssen und die andere Partei die Schnittstelle öffnen muss.

Jetzt können wir nur abnormale Kanäle verwenden. Es ist beispielsweise leicht vorstellbar, dass wir die Seite direkt in unser eigenes System einbetten und gleichzeitig den Stil und die Komponenten der Seite des Drittanbieters steuern müssen.

Schwierigkeit

Die oben erwähnte Methode besteht darin, ein Iframe in unserem eigenen System zu planen und ein Drittanbietersystem über das src-Attribut einzuführen.
Das größte Problem besteht hier in der Domänenübergreifenden Zusammenarbeit. Die im Internet am wahrscheinlichsten erwähnte Lösung ist die Verwendung von postMessage zum Domänenübergreifenden Senden. Leider ist hierfür immer noch die Zusammenarbeit eines Drittanbieters erforderlich.

Domänenübergreifende Definition

Zunächst einmal bedeutet Homologie im engeren Sinne, dass Domänenname, Protokoll und Port gleich sind.
Cross-Domain bedeutet, dass der Browser keine Skripte von anderen Websites ausführen kann. Die Ursache liegt in der Same-Origin-Policy des Browsers, einer Sicherheitsbeschränkung, die Browser in JavaScript implementieren.

Funktionen von nginx

Reverse-Proxy

Konfigurieren Sie eine URL. Wenn ein Benutzer diese URL besucht, wird der Proxy an die URL weitergeleitet, die er tatsächlich benötigt.

Trennung von statischer und dynamischer

Wie der Name schon sagt, werden dynamische Ressourcen (die Serverberechnungen erfordern) von statischen Ressourcen (im Allgemeinen Ressourcen im Zusammenhang mit statischen Seiten wie HTML, CSS, JS, IMG usw.) getrennt.

Versuchen Sie zu erreichen

Da unsere A-Anwendung Port 80 verwendet und das B-System des Drittanbieters ebenfalls Port 80 verwendet, müssen wir ein Suffix hinzufügen, um den Proxy vom B-System zu unterscheiden. Die ungefähre URL lautet wie folgt

# A's URL
http://localhost/
# B-Suffix-URL
http://localhost/dreiteilig
# Bs tatsächliche URL
http://172.16.1.1/

Normalerweise werden wir, wenn wir localhost besuchen, auf die Homepage von System A weitergeleitet. Wenn wir 172.16.1.1 besuchen, werden wir auf die Homepage von System B weitergeleitet. Wenn wir über die Proxy-URL besuchen, wird nginx sie tatsächlich als Proxy an 172.16.1.1/dreiteilig weiterleiten. Ja, haben Sie beim Testen festgestellt, dass das Suffix übernommen wurde? ? Es ist möglich, dass ich kein Profi bin und es nicht richtig konfiguriert habe, aber dies ist das Ergebnis meines Tests.

Die Idee der obigen Konfiguration besteht darin, dass die beiden Anwendungen dieselbe IP und denselben Port haben. Anschließend lädt der Iframe in Anwendung A die Homepage von Anwendung B und kann dann über js bedient werden.

Leider besteht die einzige Möglichkeit darin, einen anderen Port zu konfigurieren, z. B. die Proxy-URL von Anwendung B auf localhost:81/ zu konfigurieren. Auf diese Weise können Sie kein JS schreiben, um Anwendung B auf der Seite zu ändern, die dem Iframe von Anwendung A entspricht.

Endergebnis

Als ich bei Anwendung B f12 durchführte, stellte ich fest, dass sie eine x.min.js-Datei gekapselt hatten, die beim Anmelden und Aufrufen der Homepage geladen wird.
Und hier kommt der Trick. Ich schreibe ihre JS-Datei direkt neu, füge die benötigte Logik am Ende der Datei ein und lasse die Seite dann die geänderte JS-Datei auf meinem Server laden, wenn sie dieses x.min.js lädt, anstatt das x.min.js auf dem Server des Drittanbieters zu laden.

Das schematische Diagramm des gesamten Prozesses ist unten dargestellt:

Unten ist die Nginx-Konfiguration, die ich konfiguriert habe und verwende

Upstream Mir{
    Server 10.1.128.58:80;
}
Server {
 listen localhost:8001; # nginx muss auf die URL und den entsprechenden Port-Standort hören =/static/mir.min.js {
  Stammverzeichnis C:/r9/bin/resources;
 }
 Standort / {
  # Es ist ersichtlich, dass hier ein URL-Variablenname verwendet wird und dieser Variablenname im Upstream-Proxy-Pass http://mir definiert ist.
  # Die folgenden Elemente werden als standardmäßige domänenübergreifende Konfigurationen betrachtet. Kopieren Sie sie einfach: proxy_set_header Host $http_host;
  Proxy_Set_Header X-Real-IP $Remote_Addr;
  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  if ($request_method = 'OPTIONEN') {
   Rückgabe 204;
  }
 }
 # statischer Ressourcenfreigabeort ~ \.(gif|jpg|jpeg|css|js|svg)$ {
  Proxy-Passwort http://mir;
  Proxy_set_header Host $http_host;
  Proxy_Set_Header X-Real-IP $Remote_Addr;
  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  läuft in 30 Tagen ab;
 }
 # Domänenübergreifenden Anforderungsheader hinzufügen add_header 'Access-Control-Allow-Origin' '*';
 add_header 'Zugriffskontrolle - Anmeldeinformationen zulassen' 'wahr';
 add_header 'Access-Control-Allow-Headers' 'Autorisierung, Akzeptieren, Herkunft, DNT, X-CustomHeader, Keep-Alive, User-Agent, X-Requested-With, If-Modified-Since, Cache-Control, Inhaltstyp, Inhaltsbereich, Bereich';
 add_header 'Zugriffskontrolle-Methoden zulassen' 'GET, POST, OPTIONS, PUT, DELETE, PATCH';
 #Fehlerseite 404 /404.html;

 # Server-Fehlerseiten auf die statische Seite /50x.html umleiten
 # Konfigurieren Sie eine normale, benutzerfreundliche Fehlerseite error_page 500 502 503 504 /50x.html;
 Standort = /50x.html {
  Stamm-HTML;
 }

}

Die URL-Übereinstimmung in nginx verfügt über eine Funktion, nämlich das erste Übereinstimmungsprinzip. Bei jeder Anforderung wird von oben nach unten, unabhängig davon, welche Regel zuerst übereinstimmt, direkt zu der für diese Regel konfigurierten URL gesprungen.

Nicht zum Thema

Denn das Drittanbietersystem ist eigentlich ein normales System. Es verfügt beispielsweise standardmäßig über eine Anmeldeseite. Wir müssen den Anmeldeschritt verarbeiten. Daher müssen wir in x.min.js erkennen, ob das Drittanbietersystem korrekt geladen wurde und ob ein Anmeldevorgang erforderlich ist. Gleichzeitig müssen wir der Benutzerfreundlichkeit halber eine Maskenebene hinzufügen. Bevor wir die Drittanbieterseite bereinigen, müssen wir sie abdecken, damit Kunden sie nicht sehen können.
Nachdem das Drittanbietersystem korrekt geladen wurde, können Sie Funktionen anpassen und Stile nach Bedarf ersetzen.

Dies ist das Ende dieses Artikels darüber, wie nginx Cross-Domain-Probleme löst und Seiten von Drittanbietern einbettet. Weitere Informationen zur Cross-Domain-Einbettung von Seiten von Drittanbietern mit nginx 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!