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

JavaScript zur Implementierung des Anmeldeformulars

In diesem Artikelbeispiel wird der spezifische Ja...

Bootstrap 3.0 Studiennotizen Rastersystemprinzip

Durch die kurze Einführung in den beiden vorherig...

JS versteht die Zeitzonen GMT und UTC genau

Inhaltsverzeichnis Vorwort 1. GMT Was ist GMT Ges...

Detaillierter Prozess zum Konfigurieren eines HTTPS-Zertifikats unter Nginx

1. Der Unterschied zwischen HTTP und HTTPS HTTP: ...

Beschreibung der Grenzen und Bereiche zwischen MySQL

MySQL zwischen Grenzbereich Der Bereich zwischen ...

So implementieren Sie ein Hover-Dropdown-Menü mit CSS

Wie üblich werde ich heute über einen sehr prakti...

Implementierung der CSS3-Button-Randanimation

Erster Blick auf die Wirkung: html <a href=&qu...