So implementieren Sie die domänenübergreifende API-Proxy-Weiterleitung über die Nginx-Proxy-Weiterleitungskonfiguration

So implementieren Sie die domänenübergreifende API-Proxy-Weiterleitung über die Nginx-Proxy-Weiterleitungskonfiguration

Vorwort

Bei der Webentwicklung sind häufig domänenübergreifende Anfragen beteiligt. Es gibt viele Möglichkeiten, domänenübergreifende Probleme zu lösen, wie etwa window.name, iframe, JSONP, CORS usw., auf die hier nicht näher eingegangen wird. Die domänenübergreifende Anforderungsmethode mit verschiedenen Protokollen und Ports besteht in der Verwendung eines Proxys. Hier konzentrieren wir uns auf die Proxy-Methode von Nginx.

Szenario
Eine Webanwendung mit getrenntem Front-End und Back-End wird lokal mit Port 3000 gestartet. Auf die Front-End-Seite kann über http://127.0.0.1:3000 zugegriffen werden. Einige Ajax-Anfragen auf der Seite haben die Adressen http://127.0.0.1:3000/api/getList. Im Allgemeinen muss es 404 sein oder die Anfrage ist fehlgeschlagen, wie in der folgenden Abbildung gezeigt:

Die Schnittstelle dieses Backend-Dienstes ist auf anderen Servern gespeichert. Im Intranet des Unternehmens können Sie beispielsweise in der Testumgebung über http://172.30.1.123:8081/api/getList auf die Dienstschnittstelle zugreifen.

Die Anforderung umfasst in diesem Fall domänenübergreifende Anforderungen mit unterschiedlichen Ports, sodass wir Nginx als Proxy für die Anforderung verwenden können.

Referenz zur Nginx-Proxy-Konfiguration

Suchen Sie zuerst die Nginx-Konfigurationsdatei:

  • Der Pfad in Windows ist das Verzeichnis, in dem Sie Nginx installiert haben. Meins befindet sich beispielsweise im Stammverzeichnis von Laufwerk C: c:\nginx\conf\nginx.conf
  • Der Pfad der Mac-Systemkonfigurationsdatei lautet: /usr/local/etc/nginx/nginx.conf. Drücken Sie im Finder Umschalt+Befehl+G und geben Sie /usr/local/etc/nginx/ ein, um das Verzeichnis aufzurufen.

Fügen Sie der Nginx-Konfigurationsdatei die folgende Konfiguration hinzu:

Server {
 hören Sie 80;
 Servername 127.0.0.1;

 Standort / {
 Proxy-Passwort http://127.0.0.1:3000;
 }

 Standort ~ /api/ {
 Proxy-Passwort http://172.30.1.123:8081;
 }
}

Die obige Konfiguration kann wie folgt verstanden werden:

Hören Sie auf Port 80 (Nginx startet standardmäßig Port 80) und leiten Sie alle Anforderungsdienste von http://127.0.0.1 an Port 3000 von 127.0.0.1 weiter.
Leiten Sie http://127.0.0.1/api/- oder http://127.0.0.1/api/getList-Anfragen an http://172.30.1.123:8081 weiter.

Beenden

Nach der obigen Konfiguration können wir direkt über http://127.0.0.1 auf unsere WEB-Anwendung zugreifen (wenn IP-Zugriff verwendet wird), und die entsprechenden API-Anfragen werden auch gemäß unserer Nginx-Konfiguration gestellt. Die vom Browser angezeigte /api/getList-Anfrage ist 127.0.0.1 Port 80, aber tatsächlich wurde diese Anfrage von unserem Nginx an http://172.30.1.123:8081/api/getList weitergeleitet

Optimierung:

Die grundlegende Proxy-Funktion ist so einfach wie die obige Konfiguration.

Wenn wir jedoch den echten IP-Dienst erhalten müssen, müssen wir auch die Konfiguration bezüglich der echten IP wie folgt hinzufügen:

Server {
 hören Sie 80;
 Servername 127.0.0.1;

 Standort / {
 Proxy-Passwort http://127.0.0.1:3000;
 Proxy_set_header Host $host:80;
 Proxy_Set_Header X-Real-IP $Remote_Addr;
 proxy_set_header X-Weitergeleitet-Für $proxy_add_x_forwarded_for;
 }

 Standort ~ /api/ {
 Proxy-Passwort http://172.30.1.123:8081;
 Proxy_set_header Host $host:80;
 Proxy_Set_Header X-Real-IP $Remote_Addr;
 proxy_set_header X-Weitergeleitet-Für $proxy_add_x_forwarded_for;
 }
}

Die Konfiguration proxy_set_header ändert den HTTP-Anforderungsheader, wobei Host der angeforderte Hostname, X-Real-IP die tatsächliche IP der Anforderung und X-Forwarded-For angibt, wer die Anforderung initiiert hat.

Da unser Nginx hier ein Proxyserver ist, besteht der Zweck der Konfiguration dieser Informationen über proxy_set_header darin, dem Server das Abrufen des echten Anforderungsheaders zu ermöglichen.

Freundliche Tipps:

Sie müssen nach jeder Konfigurationsanweisung von Nginx Punkte hinzufügen. Andernfalls wird ein Konfigurationsfehler gemeldet und Sie sind verwirrt.

expandieren

Host binden

Wenn Sie sich nicht wohl dabei fühlen, die IP-Adresse für den Zugriff auf den Server einzugeben, können Sie den Host selbst ändern. Wir empfehlen das Host-Änderungstool: SwitchHosts.

Referenz zur Hoständerung:

127.0.0.1 www.domain.com #Wechseln Sie zu jedem beliebigen Domänennamen

Wenn der Host gebunden ist, können Sie den Domänennamen, den Sie in der Nginx-Konfiguration angeben, auch direkt konfigurieren, zum Beispiel:

Server {
 hören Sie 80;
 Servername www.domain.com; #Ändern Sie hier die IP in Ihren Domänennamen#...
}

Nach dem Ändern des Hosts können Sie direkt über Ihren Domänennamen darauf zugreifen, z. B.: http://www.domain.com

Über den Standort

Möglicherweise sind Sie verwirrt über die Konfiguration nach der Lokalisierung in der obigen Konfiguration. Die allgemeinen Anforderungen nach der Lokalisierung sind:

Ortsangabe / {
 # Alle Anfragen entsprechen der folgenden Regel. # Da alle Adressen mit / beginnen, trifft diese Regel auf alle Anfragen zu. # xxx Hier steht Ihre Konfiguration}

Standort = / {
 # Genaue Übereinstimmung /, jede Adresse, auf die eine beliebige Zeichenfolge folgt, stimmt nicht überein}

Lokalisierung /API {
 # Stimmt mit jeder URL überein, die mit /api beginnt, einschließlich aller URLs nach /api, beispielsweise /api/getList
 # Nachdem die Übereinstimmung gefunden wurde, mit der Suche fortfahren. # Dies wird nur verwendet, wenn der folgende reguläre Ausdruck nicht übereinstimmt.}

Standort ~ /api/abc {
 # Stimmt mit jeder URL überein, die mit /api/abc beginnt, einschließlich aller URLs nach /api/abc, beispielsweise /api/abc/getList
 # Nachdem die Übereinstimmung gefunden wurde, mit der Suche fortfahren. # Dies wird nur verwendet, wenn der folgende reguläre Ausdruck nicht übereinstimmt.}
/ wird für universelle Übereinstimmungen verwendet. Wenn es keine andere Übereinstimmung gibt, wird jede Anfrage abgeglichen. = am Anfang zeigt eine genaue Übereinstimmung an. Beispielsweise werden in A nur Anfragen abgeglichen, die mit dem Stammverzeichnis enden, und es kann keine Zeichenfolge folgen.
^~ am Anfang zeigt an, dass die URI mit einer regulären Zeichenfolge und nicht mit einer regulären Übereinstimmung beginnt; ~ am Anfang zeigt eine reguläre Übereinstimmung unter Beachtung der Groß-/Kleinschreibung an;
~* gibt eine reguläre Übereinstimmung ohne Berücksichtigung der Groß- und Kleinschreibung an

Ausführlichere Informationen zu den regulären Übereinstimmungsregeln für die Lokalisierung finden Sie unter: Zusammenfassung des Standorts der Nginx-Konfiguration und Schreiben von Umschreibregeln

Nachtrag

Der Autor ist auch ein Anfänger, der Nginx verwendet. Ich hoffe, dieses Wissen auf leicht verständliche Weise aufzuzeichnen und es mit Menschen zu teilen, die es brauchen, damit wir gemeinsam lernen können. Wenn es Auslassungen gibt, weisen Sie bitte darauf hin. Vielen Dank!

Zusammenfassen

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, dass der Inhalt dieses Artikels einen gewissen Lernwert für Ihr Studium oder Ihre Arbeit hat. Vielen Dank für Ihre Unterstützung von 123WORDPRESS.COM.

Das könnte Sie auch interessieren:
  • Implementierung von Debugging-Code über den Nginx-Reverse-Proxy
  • So verwenden Sie Nginx zum Proxy mehrerer Anwendungssites in Docker
  • Konfigurationscodebeispiel für Nginx-Forward- und Reverse-Proxy sowie Lastausgleichsfunktionen
  • Detaillierte Erklärung zum Hinzufügen eines Nginx-Proxys mit Go
  • So fügen Sie eine Nginx-Proxy-Konfiguration hinzu, um nur internen IP-Zugriff zuzulassen
  • Implementierung zum Entfernen des Präfixes aus der Nginx-Proxy-Pass-Konfiguration
  • 18 Tipps zur Konfiguration des Nginx-Proxy-Cache, die Betreiber kennen müssen (welche kennen Sie?)
  • Unterschied und Prinzipanalyse des Nginx-Forward- und Reverse-Proxy

<<:  Lösungen für MySQL-Batch-Insert- und eindeutige Indexprobleme

>>:  MySQL Slow Query-Optimierung: Die Vorteile von Limit aus Theorie und Praxis

Artikel empfehlen

Verwenden Sie Iframe, um Wettereffekte auf Webseiten anzuzeigen

CSS: Code kopieren Der Code lautet wie folgt: *{Ra...

Grafisches Tutorial zum Konfigurieren eines Protokollservers unter Linux

Vorwort Dieser Artikel stellt hauptsächlich die r...

Detaillierte Erklärung der Set-Datenstruktur von JavaScript

Inhaltsverzeichnis 1. Was ist Set 2. Konstruktor ...

Tutorial zur Installation des Tomcat-Servers unter Windows

1 Herunterladen und vorbereiten Zuerst müssen wir...

So überprüfen Sie, wo die Metadatensperre in MySQL blockiert ist

So überprüfen Sie, wo die Metadatensperre in MySQ...

Erweiterte benutzerdefinierte JavaScript-Ausnahme

Inhaltsverzeichnis 1. Konzept 1.1 Was sind Fehler...

Detailliertes Tutorial zur Installation von mysql5.7.18 auf centos7.3

1 Überprüfen Sie die Linux-Distributionsversion [...

Verwendung und Unterschied von Vue.set() und this.$set()

Wenn wir Vue zur Entwicklung verwenden, kann eine...

Detaillierte Erläuterung des verschachtelten Routings im Vue-Router

Inhaltsverzeichnis Schritt 1. Konfigurieren Sie R...

IIS7 IIS8 http springt automatisch zu HTTPS (Port 80 springt zu Port 443)

IIS7 muss bestätigen, ob das pseudostatische Modu...