Nginx-Proxy-Axios-Anforderung und Vorsichtsmaßnahmen

Nginx-Proxy-Axios-Anforderung und Vorsichtsmaßnahmen

Vorwort

Ich habe vor kurzem eine kleine Demo geschrieben. Da ich die Online-Daten einer großen Fabrik verwendete, wies die Schnittstelle domänenübergreifende Einschränkungen auf. Daher verwendete ich einen Nginx-Proxy, um diese Probleme zu lösen.

1. Konfigurationsinformationen zu nginx.conf

Da nginx.conf viele Konfigurationsinformationen enthält, konzentriert sich dieser Artikel nur auf die Einstellungen von Axios und statischen Ressourcenanforderungen und weist auch auf einige allgemeine Konfigurationselemente hin. Die spezifischen Einstellungen sind wie folgt:

# Richten Sie den HTTP-Server ein und verwenden Sie seine Reverse-Proxy-Funktion, um die Lastverteilung zu unterstützen http {
 #Verbindungs-Timeout keepalive_timeout 120;
 
 #gzip-Komprimierungsschalter und zugehörige Konfiguration gzip ein;
 gzip_min_länge 1k;
 gzip_puffer 4 32k;
 gzip_http_version 1.1;
 gzip_comp_level 2;
 gzip_types Text/einfache Anwendung/x-Javascript-Text/CSS-Anwendung/Xml;
 gzip_vary ein;
 gzip_disable "MSIE [1-6].";

 #Stellen Sie die aktuelle Serverliste upstream zp_server{ ein
 Server 127.0.0.1:8089;
 }
 
 #HTTP-Server {
 #Listen-Port 80
 
 #Definieren Sie den Dienstnamen server_name localthost;
 
 #Homepageindex index.html
 
 #Zeigen Sie auf das Stammverzeichnis des Projekts D:\project\src\main\webapp;
 
 #Kodierungsformat Zeichensatz utf-8;
 
 #Proxy-Pfad (an Upstream gebunden), legen Sie den zugeordneten Pfad nach dem Standortstandort / { fest
  #Proxy-Konfigurationsparameter proxy_connect_timeout 180;
  Proxy_Sendezeitüberschreitung 180;
  Proxy_Lese_Timeout 180;
  Proxy_Set_Header Host $host;
  proxy_set_header X-Forwarder-Für $remote_addr;
  Proxy-Passwort http://zp_server/;
  
  #Domänenübergreifende Einstellungen add_header 'Access-Control-Allow-Origin' '*' immer;
  add_header 'Zugriffskontrolle-Anmeldeinformationen zulassen' 'true';
  add_header 'Access-Control-Allow-Headers' 'Origin, X-Requested-With, Content-Type, Accept' immer;
  }
  
  #Konfigurieren Sie statische Ressourcen, um das Problem zu lösen, dass JS-CSS-Dateien nicht geladen und aufgerufen werden können. Beachten Sie, dass am Ende kein / stehen sollte.
  Standort ~ .*\.(js|css|jpg|png)$ {
  Proxy-Passwort http://zp_server;
  } 
 }
}

2. Das Schrägstrichproblem von proxy_pass

Die offizielle Website von Nginx unterteilt proxy_pass in zwei Typen:

  • Eine besteht darin, nur die IP- und Portnummer anzugeben (nicht einmal den / nach dem Port, hier ist besondere Aufmerksamkeit geboten), z. B. proxy_pass http://localhost:8080. Diese Methode wird als Methode ohne URI bezeichnet.
  • Der andere Typ hat andere Pfade nach der Portnummer, einschließlich solcher mit nur einem einzelnen /, wie etwa proxy_pass http://localhost:8080/, und andere Pfade, wie etwa proxy_pass http://localhost:8080/abc.

2.1 Für Methoden ohne URI

Bei Methoden ohne URI behält Nginx den Pfadteil des Speicherorts bei, zum Beispiel:

Standort /api1/ {
 Proxy-Passwort http://localhost:8080;
}

Beim Zugriff auf http://localhost/api1/xxx erfolgt eine Weiterleitung an http://localhost:8080/api1/xxx.

2.2 Für die URI-Methode

Für URI-Methoden verwendet nginx eine Ersetzungsmethode wie „Alias“, um die URL zu ersetzen. Dieser Ersatz ist nur ein wörtlicher Ersatz, zum Beispiel:

Standort /api2/ {
 Proxy-Passwort http://localhost:8080/;
}

Beim Zugriff auf http://localhost/api2/xxx wird http://localhost/api2/ (beachten Sie das letzte /) durch http://localhost:8080/ ersetzt und anschließend das verbleibende xxx hinzugefügt, sodass es zu http://localhost:8080/xxx wird.

2.3 Zusammenfassung

Server {
 hören Sie 80;
 Servername localhost;

 Standort /api1/ {
  Proxy-Passwort http://localhost:8080;
 }
 # http://localhost/api1/xxx -> http://localhost:8080/api1/xxx


 Standort /api2/ {
  Proxy-Passwort http://localhost:8080/;
 }
 # http://localhost/api2/xxx -> http://localhost:8080/xxx


 Standort /api3 {
  Proxy-Passwort http://localhost:8080;
 }
 # http://localhost/api3/xxx -> http://localhost:8080/api3/xxx


 Standort /api4 {
  Proxy-Passwort http://localhost:8080/;
 }
 # http://localhost/api4/xxx -> http://localhost:8080//xxx, achten Sie hier bitte auf die doppelten Schrägstriche und analysieren Sie diese sorgfältig.


 Standort /api5/ {
  Proxy-Passwort http://localhost:8080/haha;
 }
 # http://localhost/api5/xxx -> http://localhost:8080/hahaxxx. Bitte beachten Sie, dass zwischen haha ​​​​und xxx kein Schrägstrich steht. Lassen Sie uns den Grund analysieren.

 Standort /api6/ {
  Proxy-Passwort http://localhost:8080/haha/;
 }
 # http://localhost/api6/xxx -> http://localhost:8080/haha/xxx

 Standort /api7 {
  Proxy-Passwort http://localhost:8080/haha;
 }
 # http://localhost/api7/xxx -> http://localhost:8080/haha/xxx

 Standort /api8 {
  Proxy-Passwort http://localhost:8080/haha/;
 }
 # http://localhost/api8/xxx -> http://localhost:8080/haha//xxx, bitte beachten Sie hier die doppelten Schrägstriche.
}

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:
  • Vue.js: Praktische Verwendung von Vuex + Axios zum Senden von Anfragen, detaillierte Erklärung
  • Beispiel für die Verarbeitung einer HTTP-Sendeanforderung durch Axios in Vue (Posten und Abrufen)
  • Probleme, die beim Senden domänenübergreifender Anfragen mit VUE axios beachtet werden müssen
  • Vue Axios synchrone Anforderungslösung
  • Korrekte Handhabung des Vue Axios-Anforderungstimeouts
  • Detaillierte Erklärung der Verwendung von Axios durch Vue zum Senden von Post-Anfragen zum automatischen Setzen von Cookies
  • Detaillierte Erklärung zur Verwendung von Axios für Ajax-Anfragen in Vue
  • Vue-cli Axios-Anforderungsmethode und Probleme bei der domänenübergreifenden Verarbeitung
  • Lösen Sie das Problem, dass Axios eine Post-Anfrage sendet und den Statuscode 400 zurückgibt
  • Perfekte Lösung für das Problem des Axios Cross-Domain-Anforderungsfehlers

<<:  Tomcat-Komponenten veranschaulichen die architektonische Entwicklung eines Webservers

>>:  So löschen Sie Datensätze in MySQL automatisch vor einer bestimmten Zeit

Artikel empfehlen

Verwenden Sie reines CSS, um einen Scroll-Schatteneffekt zu erzielen

Um es gleich auf den Punkt zu bringen: Bei manche...

Tutorial zur Installation und Konfiguration von MySQL 5.7

In diesem Artikel finden Sie das Tutorial zur Ins...

Ein genauerer Blick auf die Unterschiede zwischen Link und @import

Es gibt drei Hauptmethoden, CSS auf einer Seite zu...

Webpack lädt CSS-Dateien und ihre Konfigurationsmethode

webpack lädt CSS-Dateien und deren Konfiguration ...

Erfahrung in der Lösung von Tomcat-Speicherüberlaufproblemen

Vor einiger Zeit habe ich Testern eine Produktver...

Detaillierte Erklärung der MySQL-Alter-Ignore-Syntax

Als ich heute bei der Arbeit war, wurde mir von d...

Docker stellt nginx bereit und mountet Ordner und Dateioperationen

Während dieser Zeit habe ich Docker studiert und ...

Detaillierte Erläuterung des Zahlungsfunktionscodes des Vue-Projekts

1. Alipay-Methode: Alipay-Methode: Klicken Sie zu...

Detaillierte Erklärung des JavaScript-Proxy-Objekts

Inhaltsverzeichnis 1. Was ist ein Proxy? 2. Wie w...

Centos7-Installation und Konfiguration von Mysql5.7

Schritt 1: Holen Sie sich die MySQL YUM-Quelle Ge...