Eingehende Analyse der globalen Axios-Konfiguration, der Interceptoren und des domänenübergreifenden Proxy-Proxys (Bild und Text)

1. Globale Konfiguration von Axios

1. Warum Axios global konfigurieren? In der tatsächlichen Projektentwicklung wird Axios in fast jeder Komponente verwendet, um Datenanfragen zu initiieren. Zu diesem Zeitpunkt treten die folgenden zwei Probleme auf:

① Jede Komponente muss Axios importieren (aufgeblähter Code).

② Jedes Mal, wenn Sie eine Anfrage senden, müssen Sie den vollständigen Anfragepfad ausfüllen (nicht förderlich für die spätere Wartung). ) [Verwandte Empfehlungen:

vue.js-Video-Tutorial

2. So konfigurieren Sie Axios global

In der main.js-Eintragsdatei mounten Sie Axios global über app.config.globalProperties Beispielcode lautet wie folgt:

3. Um Axios global im Vue2-Projekt zu konfigurieren, müssen Sie Axios global über das Prototyp-Prototypobjekt des Vue-Konstruktors in der main.js-Eintragsdatei konfigurieren . axios interceptor

1. Was ist ein Interceptor (englisch: Interceptor)?

2. Konfigurieren Sie den Anforderungs-Interceptor.

Sie können den Anforderungs-Interceptor über axios.interceptors.request.use konfigurieren (erfolgreicher Rückruf, fehlgeschlagener Rückruf). Der Beispielcode lautet wie folgt: 2.1 Request Interceptor – Token-Authentifizierung von ui

3. Konfigurieren Sie den Antwort-Interceptor

Sie können den Antwort-Interceptor über axios.interceptors.response.use konfigurieren (erfolgreicher Rückruf, fehlgeschlagener Rückruf). Der Beispielcode lautet wie folgt:

Praktisches Beispiel zur Darstellung des Ladeeffekts:

3. Domänenübergreifender Proxy-Proxy

1. Domänenübergreifendes Schnittstellenproblem

domänenübergreifendes Problem lösen

1), Cors (die Standardverarbeitung) erfordert keine Verarbeitung durch Front-End-Personal, nur die Person, die den Server schreibt, muss bei der Rückgabe der Antwort einige spezielle Antwortheader hinzufügen im Server

2), Jsonp, die genialste Lösung Mit Hilfe des src-Attributs im Skript-Tag wird diese Funktion bei der Einführung externer Ressourcen nicht durch die Same-Origin-Richtlinie eingeschränkt. Sie wird in der Entwicklung selten verwendet Es erfordert Front-End- und Back-End-Personal, um es gemeinsam abzuschließen, und kann nur das domänenübergreifende Problem von Get-Anfragen lösen

3), Proxy-Server

Der Proxy-Server ist auch ein Server Im Einklang mit unserer eigenen. Die Kommunikation zwischen den beiden Servern entspricht nicht den gleichen Ursprungsrichtlinien. Dies kann das domänenübergreifende Problem lösen. Die Portnummer ist also auch 8080

Die Adresse, an der sich das Vue-Projekt befindet Läuft: http://localhost:8080/

Die Adresse, an der die API-Schnittstelle ausgeführt wird: http://www.escook.cn/api/users

Aufgrund der aktuellen API-Schnittstelle ist die domänenübergreifende Ressourcenfreigabe von CORS nicht aktiviert Daher kann die obige Schnittstelle standardmäßig keine erfolgreiche Anfrage stellen!

2. Lösen Sie domänenübergreifende Schnittstellenprobleme über Proxys.

Wenn bei Projekten, die über vue-cli erstellt wurden, domänenübergreifende Schnittstellenprobleme auftreten, können diese über Proxys gelöst werden:

① Setzen Sie axios Das Anforderungsstammverzeichnis Der Pfad wird auf die laufende Adresse des Vue-Projekts gesetzt (Schnittstellenanfragen sind nicht mehr domänenübergreifend)

② Das Vue-Projekt stellt fest, dass die angeforderte Schnittstelle nicht existiert und leitet die Anfrage an den Proxy-Agenten weiter

③ Der Proxy ersetzt die Fordern Sie den Root-Pfad mit dem Attributwert devServer.proxy an und initiieren Sie eine echte Datenanforderung. Der Proxy leitet die angeforderten Daten an axios weiter. 3. Konfigurieren Sie den Proxy-Agenten im Projekt. Schritt 1. In der Eintragsdatei main.js Geben Sie den Anforderungsstammpfad von axios ein. Ändern Sie ihn in den Stammpfad des aktuellen Webprojekts:

Schritt 2: Erstellen Sie die Konfigurationsdatei vue.config.js im Stammverzeichnis des Projekts und deklarieren Sie die Folgende Konfiguration:

① Die von devServer.proxy bereitgestellte Proxy-Funktion ist nur während der Entwicklungs- und Debugging-Phase wirksam.

② Wenn das Projekt online gestartet wird, muss der API-Schnittstellenserver dies weiterhin tun Aktivieren Sie die domänenübergreifende Ressourcenfreigabe von CORS.

Verwendungsmethode 1: Es sind zwei Proxyserver konfiguriert. Mängel:

1. Die Verwendung des Proxyservers kann nicht flexibel gesteuert werden. Der öffentliche Ordner entspricht dem Stammpfad des 8080-Servers (Was sich im 8080-Server befindet, hängt davon ab, was sich im öffentlichen Ordner befindet). Manchmal leitet die angeforderte Ressource 8080 selbst die Anfrage nicht an den 5000-Server weiter.

2 der 5000-Server

Verwenden Sie Methode zwei, um das Anforderungspräfix „/api“ des Proxyservers zu aktivieren

Funktion: Wenn eine lokale Anforderung an den Proxyserver gesendet wird, ermittelt der Proxyserver, ob das Präfix des Wenn dies der Fall ist, wird die Anfrage gesendet (leiten Sie die Anfrage an 5000 weiter). Wenn nicht, wird die Anfrage nicht gesendet. Sie können flexibel steuern, ob der Proxyserver verwendet werden soll ('/api'). ist kein fester Wert und kann als „/hah“ usw. angepasst werden Fordern Sie dies direkt an, es wird ein 404-Fehler verursacht, da beim Senden der Anfrage an den 5050-Server immer noch /api/students übertragen wird. Der 5050-Server verfügt über Students, aber nicht über /api/students

Mit dieser Konfiguration können Sie dies sicherstellen Wenn der Proxyserver eine Anfrage an den 5050-Server sendet, wird nur /students gesendet, um die Daten abzurufen Anforderungsheaderwert)

Wenn changeOrigin: true, zeigt der Proxyserver an, dass es sich auch um einen 5050-Server handelt

Wenn changeOrigin: false, gibt der Proxyserver an, dass es sich um einen 8080-Server handelt

Manchmal gelten für den 5050-Server einige Einschränkungen. Daher sollte dieses Konfigurationselement am besten auf „true“ gesetzt werden.

Wenn ws und changeOrigin nicht geschrieben werden, ist der Standardwert auch wahr (sofern er in der Reaktion nicht als falsch geschrieben wird)

Das obige ist der detaillierte Inhalt vonEingehende Analyse der globalen Axios-Konfiguration, der Interceptoren und des domänenübergreifenden Proxy-Proxys (Bild und Text). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!