Nginx löst die domänenübergreifende sekundäre Anforderungsinstanz von WebApi

Dieser Artikel enthält hauptsächlich einen Artikel über Nginx, der das Problem der domänenübergreifenden Sekundäranforderung von WebApi und der einzelnen Vue-Seite löst. Er hat einen guten Referenzwert und ich hoffe, dass er für alle hilfreich ist. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

1. Vorwort

Da das Projekt vom Front-End und dem Back-End getrennt ist, werden die API-Schnittstelle und das Web-Front-End an verschiedenen Standorten bereitgestellt, daher im vorherigen Artikel: die domänenübergreifende Anforderungslösung WebApi Ajax (CORS-Implementierung) Verwenden Sie domänenübergreifende Verarbeitung anstelle von Jsonp.

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

2. Grund

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

Da unser WEB-Server CORS verwendet, um das Problem des domänenübergreifenden Zugriffs zu lösen, und gleichzeitig benutzerdefinierte Parameter im Header hinzufügt und das JSON-Format für die Dateninteraktion verwendet, ist jede unserer Anfragen eine komplexe Anfrage. Als Ergebnis werden für jede Anfrage zwei Anfragen gesendet.

Die Gründe sind wie folgt:

Verwenden Sie CORS, um domänenübergreifende Probleme zu lösen

3. Lösung

3.1 Nginx

3.1 .1 Idee

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 Installieren Sie Nginx

Am einfachsten ist es, Nginx unter Windows zu installieren.

3.1.2.2 Nginx konfigurieren

Es wird mit der Standardkonfiguration geliefert, wenn Sie es einzeln bereitstellen möchten -Seitenanwendungen wie Vue und Angular, legen Sie die gepackte Datei index.html und das Verzeichnis dist in das Release-Verzeichnis ab, kopieren Sie den Pfad und konfigurieren Sie damit den Nginx-Dienst so, dass er wie folgt auf die Konfigurationsdatei

verweist :

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;# 代理接口地址
 }
 }

3.1.2.3 Allgemeine Nginx-Befehle

Start: start nginx

Konfiguration neu laden: nginx -s reload

Protokolldatei erneut öffnen: nginx -s erneut öffnen

Konfiguration testen Ob die Datei korrekt ist: nginx -t [optional: Pfad angeben]

Schnellstopp: nginx -s stop

Ordentlicher Stopp: nginx - s beenden

3.1.3 Nginx Single Page Application H5 History URL-Umschreiben

Unterstützt

Vue, Angular, React

Ursache

Wenn Sie eine einzelne Seite implementieren, wird beim Aktualisieren der Seite eine Seite generiert. Das Problem kann nicht gefunden werden, daher müssen Sie die URL-Adresse in index.html umschreiben.

Zu beachtende Punkte

Bei der Verwendung von URL-Rewriting in Nginx wird immer der folgende Fehler gemeldet

Nach der Überprüfung wird festgestellt, dass if und ( Es muss ein Leerzeichen zwischen

3.2 Sonstiges

3.2.1 Idee

Können wir die Anzahl der Preflight-Anfragen reduzieren, da wir Preflight-Anfragen senden möchten? 🎜>Zum Beispiel können Sie einen Gültigkeitszeitraum festlegen und der Preflight wird während des Gültigkeitszeitraums nicht wiederholt.

3.2.2 Implementierung

Sie können danach ein Access-Control-Max hinzufügen Der Preflight ist auf dem Server abgeschlossen. -Alter-Anforderungsheader zur Lösung dieses Problems

3.2.3 CORS-Antwortfeldbeschreibung

Access-Control-Allow-Methods

Dieses Feld ist erforderlich und sein Wert ist eine getrennte Zeichenfolge, die alle vom Server unterstützten domänenübergreifenden Anforderungsmethoden angibt, nicht nur die vom Browser angeforderte Methode um Mehrfachanfragen zu vermeiden -Header-Feld .

Es ist auch eine durch Kommas getrennte Zeichenfolge, die alle vom Server unterstützten Header-Felder angibt, nicht beschränkt auf die vom Browser in „Preflight“ angeforderten Felder

Access-Control-Allow . -Anmeldeinformationen

Dieses Feld hat die gleiche Bedeutung wie in einer einfachen Anfrage

Access-Control-Max-Age

Dieses Feld ist optional und wird verwendet, um dies anzugeben Die Gültigkeitsdauer beträgt im obigen Ergebnis 20 Tage (1728000 Sekunden), was bedeutet, dass die Antwort 1728000 Sekunden lang (d. h. 20 Tage) zwischengespeichert werden darf Es besteht keine Notwendigkeit, eine weitere Preflight-Anfrage zu stellen. 🎜>

Verwandte Empfehlungen:

Detailliertes Beispiel für die Verwendung von Axios zum Anfordern von Daten über Domänen hinweg

Ein einfaches Beispiel für den domänenübergreifenden Aufruf von WebService durch js

Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: X-Custom-Header
Access-Control-Allow-Credentials: true
Access-Control-Max-Age: 1728000

Lösung für das Problem von 2 Anfragen bei der domänenübergreifenden Ajax-Übermittlung in jquery

Das obige ist der detaillierte Inhalt vonNginx löst die domänenübergreifende sekundäre Anforderungsinstanz von WebApi. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!