Detaillierte Erklärung des Vue-Datenproxys

Es gibt viele Möglichkeiten, domänenübergreifende Probleme wie JSONP und CORS zu lösen, aber beide erfordern die Hilfe von Backend-Personal.

1. Worüber ich unten sprechen werde, ist eine Lösung, die Front-End-Mitarbeiter in vue-cli abschließen können - Datenproxy

(1) Zuerst müssen Sie ein Plug-In aus dem Konfigurationselement des offiziellen Vue-CLI-Dokuments herunterladen

(2) Fügen Sie den Teil im roten Kreis im obigen Bild in die babel.config.js des Vue-Gerüsts ein

(3) Der rot eingekreiste Teil http://localhost:5000 in der obigen Abbildung ist die lokale Serveradresse, aber der von meinem Projekt gestartete Dienst ist http://localhost:8082/

An diesem Punkt sende ich eine Anfrage an das Backend in meinem Projekt

Sie können die Daten erhalten

Beachten Sie, dass, wenn sich im öffentlichen Ordner Ihres Projekts eine Datei mit demselben Namen wie der lokale Server befindet, diese zuerst im öffentlichen Ordner des Projekts gelesen wird.

2. Der oben genannte Datenagent weist noch folgende Mängel auf

(1) Wenn es eine lokale öffentliche Datei mit demselben Dateinamen wie die Serverdatei gibt, wird zuerst die lokale Datei zurückgegeben.

(2) Es kann nur ein einziger Agent erstellt werden

1. Um die oben genannten Probleme zu lösen, kann eine andere Möglichkeit zum Erstellen eines Proxys verwendet werden

In der obigen Abbildung sind /api und /apii zwei verschiedene Datenagenten.

2. Gleichzeitig sollte der Schnittstellenpfad für das Front-End zum Senden von Anfragen von http://localhost:8082/students wie folgt geändert werden, damit Dateien im lokalen öffentlichen Ordner nicht angefordert werden.

Zusammenfassen

Dieser Artikel endet hier. Ich hoffe, er kann Ihnen helfen. Ich hoffe auch, dass Sie mehr Inhalt auf 123WORDPRESS.COM lesen können!