Wie Nginx das Problem domänenübergreifender Sekundäranfragen von WebApi und einzelner Vue-Seiten löst

1. Vorwort

Da das Projekt vom Front- und Backend getrennt ist, werden die API-Schnittstelle und das Web-Frontend an verschiedenen Standorten bereitgestellt Im vorherigen Artikel wurde die domänenübergreifende Anforderung von Webapi Ajax gelöst (Cors-Implementierung), die domänenübergreifende Verarbeitung anstelle von JSONP verwendet.

Aber nach einiger Zeit habe ich ein sehr seltsames Problem entdeckt. Jedes Mal, wenn das Frontend über die Entwicklertools des Browsers eine Anfrage initiiert, kann ich sehen, dass es unten zwei Anfragen für dieselbe URL gibt Im Netzwerk ist die Methode der ersten Anfrage Optionen, die Methode der zweiten Anfrage ist das echte Get oder Post, und die erste Anfrage gibt keine Daten zurück und die zweite Anfrage gibt normale Daten zurück.

2. Grund

Die erste Optionsanforderung wird durch die Verarbeitung des domänenübergreifenden Zugriffs durch den Webserver ausgelöst. Optionen ist eine Preflight-Anfrage. Wenn der Browser eine domänenübergreifende Zugriffsanforderung verarbeitet, sendet er zunächst eine Preflight-Anfrage an den Server, den Browser bestimmt, ob der Server den Zugriff zulässt. Wenn der Webserver CORS zur Unterstützung des domänenübergreifenden Zugriffs verwendet, ist diese Preflight-Anfrage bei der Verarbeitung komplexer Anfragen unvermeidlich.

Da unser Webserver CORS verwendet, um das Problem des domänenübergreifenden Zugriffs zu lösen, gleichzeitig benutzerdefinierte Parameter im Header hinzufügt und das JSON-Format für die Dateninteraktion verwendet, ist jede unserer Anforderungen kompliziert. Anfrage, was zu dem Phänomen führt, dass für jede Anfrage zwei Anfragen gesendet werden.

Die Gründe sind wie folgt:

Cors verwenden, um domänenübergreifende Probleme zu lösen

3. Lösung #🎜🎜 ##### 🎜🎜 ## 🎜🎜#3.1 nginx#🎜🎜 ## 🎜🎜 ## 🎜🎜3.1.1 Denken #🎜🎜 ## 🎜🎜#🎜🎜 # # Stellen Sie das Front-End-Projekt in Nginx bereit und lösen Sie das domänenübergreifende Anforderungsproblem über Proxy

3.1.2 Implementierung

#🎜🎜 # 3.1.2.1 Nginx installieren

Am einfachsten ist es, Nginx unter Windows zu installieren, das komprimierte Paket direkt herunterzuladen und es dann zu entpacken

3.1 .2.2 Konfigurieren Sie nginx# 🎜🎜# verfügt über eine eigene Standardkonfiguration. Wenn Sie Single-Page-Anwendungen wie Vue und Angular bereitstellen möchten, fügen Sie die gepackte Datei index.html und das Dist-Verzeichnis in die Version ein Verzeichnis und kopieren Sie den Pfad, der zum Konfigurieren des Nginx-Dienstes verwendet wird, wie folgt auf

:

<strong>server {
 listen 9461; # 监听端口号
 server_name localhost 192.168.88.22; # 访问地址
 location / {
 root 项目路径; # 例如：e:/publish/xxx/;
 index index.html;

 # 此处用于处理 vue、angular、react 使用h5 的 history时 重写的问题
 if (!-e $request_filename) {
 rewrite ^(.*) /index.html last;
 break;
 }
 }

 # 代理服务端接口
 location /api {
 proxy_pass http://localhost:9460/api;# 代理接口地址
 }
 }</strong>

3.1.2.3 allgemeine Nginx-Befehle #🎜 🎜#

Start: nginx starten

Konfiguration neu laden: nginx -s reload

Protokolldatei erneut öffnen: nginx -s reopen

Testen Sie, ob die Konfigurationsdatei korrekt ist: nginx -t [Optional: Pfad angeben]

Schnellstopp: nginx -s stop

Ordentlicher Stopp: nginx -s beenden

# 🎜🎜#3.1.3 Nginx-Einzelseitenanwendung H5-Verlaufs-URL neu schreiben

Support

# 🎜🎜#vue, Angular, React# 🎜🎜#

Ursache

Wenn Sie eine einzelne Seite implementieren, wird die Seite beim Aktualisieren nicht gefunden Daher müssen Sie die URL-Adresse in index.html umschreiben.

Achtung

Bei Verwendung von URL-Rewriting in Nginx wird der Fehler weiterhin wie folgt gemeldet#🎜🎜 #

Nach der Überprüfung wurde festgestellt, dass zwischen if und ( ein Leerzeichen stehen muss ## 🎜🎜#3.2.1 Idee

Können wir die Anzahl der Preflight-Anfragen reduzieren?

Zum Beispiel wir kann einen Gültigkeitszeitraum festlegen. Die Vorabprüfung wird während des Gültigkeitszeitraums nicht wiederholt, um dieses Problem zu lösen.

Dieses Feld ist ein Komma. Getrennte Zeichenfolge, die alle vom Server unterstützten domänenübergreifenden Anforderungsmethoden angibt, nicht nur die vom Browser angeforderte

access-control-allow-headers

Wenn der Browser die Anfrage das Feld „access-control-request-headers“ enthält, ist das Feld „access-control-allow-headers“ vorhanden Erforderlich.

Es ist auch eine durch Kommas getrennte Zeichenfolge, die alle vom Server unterstützten Header-Informationsfelder angibt. Nicht beschränkt auf Felder, die vom Browser im „Preflight“ angefordert werden.

access- control-allow-credentials

Dieses Feld hat die gleiche Bedeutung wie bei der Anforderung in einer einfachen Anfrage. #

access-control-max-age

Dieses Feld ist optional und wird verwendet, um die Gültigkeitsdauer dieser Preflight-Anfrage in Sekunden anzugeben. Im obigen Ergebnis beträgt die Gültigkeitsdauer 20 Tage (1728000 Sekunden), d. h. die Antwort darf 1728000 Sekunden lang zwischengespeichert werden. 20 Tage), während dieser Zeit besteht keine Notwendigkeit, eine weitere Preflight-Anfrage zu stellen

access-control-allow-methods: get, post, put
access-control-allow-headers: x-custom-header
access-control-allow-credentials: true
access-control-max-age: 1728000

.

Das obige ist der detaillierte Inhalt vonWie Nginx das Problem domänenübergreifender Sekundäranfragen von WebApi und einzelner Vue-Seiten löst. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!