Hinweise zur Konfiguration mehrerer Proxys mithilfe von Vue-Projekten
|
Im Entwicklungsprozess eines Vue-Projekts konfigurieren wir zur Vereinfachung des lokalen Debuggens normalerweise devServer in vue.config.js, um einen Server lokal zu starten. Bei dieser Option konfigurieren wir die Proxy-Eigenschaft so, dass die an den lokalen Server (z. B. /api/action) gerichtete Anfrage an den Backend-Entwicklungsserver (z. B. http://xxx.xxx.xxx/api/action) weitergeleitet wird.
devServer: {
Port: 8081,
Proxy: {
'/api/Aktion': {
Ziel: 'http://192.168.200.106:81',
changeOrigin: wahr,
ws: wahr,
sicher: falsch
}
}
},
```Achten Sie bei dieser Konfiguration auf folgende zwei Punkte:Bei überlappenden Schnittstellenadressen wird die Adresse mit dem geringsten Übereinstimmungsgrad ans Ende gestellt. Zum Beispiel:
Wenn wir wie folgt schreiben:
Proxy: {
'/': {
Ziel: 'http://192.191.1.1',
changeOrigin: wahr,
ws: wahr,
sicher: falsch
},
'/api': {
Ziel: 'http://192.191.1.2',
changeOrigin: wahr,
ws: wahr,
sicher: falsch
},
'/api/Aktion': {
Ziel: 'http://192.191.1.3',
changeOrigin: wahr,
ws: wahr,
sicher: falsch
}
}Dann werden alle Anfragen an /, /api und /api/action an 192.191.1.1 weitergeleitet. Der Grund dafür ist, dass der Abgleich hier eigentlich ein regulärer Abgleichprozess ist. Wenn wir /api anfordern, lesen wir zuerst das erste Konfigurationselement und verwenden das / in der Konfiguration, um das /api in der Anforderung abzugleichen. Es wird festgestellt, dass das angeforderte /api das Konfigurationselement / enthält, und der Abgleich ist erfolgreich. Die Anforderung wird direkt an 192.191.1.1 weitergeleitet. Dasselbe gilt für den Abgleich von /api/action. Mit anderen Worten lautet die Übereinstimmungsregel: Verwenden Sie die Adresse im Konfigurationselement, um die Adresse in der Anforderung abzugleichen. Wenn die Adresse in der Anforderung die Adresse in der Konfiguration enthält, ist die Übereinstimmung erfolgreich. Wählen Sie andernfalls das nächste Konfigurationselement aus, um mit der Übereinstimmung fortzufahren. Daher ist die Übereinstimmung umso geringer, je weniger Zeichen in der Konfigurationsadresse mit der Anforderungsadresse übereinstimmen. Im obigen Beispiel stimmt nur ein Zeichen der Adresse (/) in der Konfiguration mit der Anforderungsadresse (/api) überein, daher ist der Übereinstimmungsgrad gering. Die korrekte Schreibweise müsste also lauten:
Proxy: {
'/api/Aktion': {
Ziel: 'http://192.191.1.3',
changeOrigin: wahr,
ws: wahr,
sicher: falsch
},
'/api': {
Ziel: 'http://192.191.1.2',
changeOrigin: wahr,
ws: wahr,
sicher: falsch
},
'/': {
Ziel: 'http://192.191.1.1',
changeOrigin: wahr,
ws: wahr,
sicher: falsch
}
}Auf diese Weise können Anfragen an die drei Adressen korrekt an die entsprechenden Adressen weitergeleitet werden. Wenn mehrere Adressen dasselbe Ziel vertreten, können sie zusammengeführt werdenDa das Backend in tatsächlichen Anwendungen im Microservice-Modus entwickelt wird, können wir während der Entwicklungsphase verschiedene Dienste an verschiedene Adressen weiterleiten. Wenn es viele Dienste gibt, ist auch die Anzahl unserer Proxys groß:
Proxy: {
'/api/Aktion': {
Ziel: 'http://192.191.1.3',
changeOrigin: wahr,
ws: wahr,
sicher: falsch
},
'/api/aktion2': {
Ziel: 'http://192.191.1.4',
changeOrigin: wahr,
ws: wahr,
sicher: falsch
},
'/api/action3': {
Ziel: 'http://192.191.1.3',
changeOrigin: wahr,
ws: wahr,
sicher: falsch
},
'/api/action4': {
Ziel: 'http://192.191.1.4',
changeOrigin: wahr,
ws: wahr,
sicher: falsch
},
'/api/action5': {
Ziel: 'http://192.191.1.5',
changeOrigin: wahr,
ws: wahr,
sicher: falsch
},
'/api/action6': {
Ziel: 'http://192.191.1.6',
changeOrigin: wahr,
ws: wahr,
sicher: falsch
},
'/api/action7': {
Ziel: 'http://192.191.1.5',
changeOrigin: wahr,
ws: wahr,
sicher: falsch
},
'/api/action8': {
Ziel: 'http://192.191.1.6',
changeOrigin: wahr,
ws: wahr,
sicher: falsch
},
'/api/action9': {
Ziel: 'http://192.191.1.7',
changeOrigin: wahr,
ws: wahr,
sicher: falsch
},
'/api': {
Ziel: 'http://192.191.1.2',
changeOrigin: wahr,
ws: wahr,
sicher: falsch
},
'/': {
Ziel: 'http://192.191.1.1',
changeOrigin: wahr,
ws: wahr,
sicher: falsch
},
}
Wenn die Anzahl der konfigurierten Proxys zehn überschreitet, wird beim Kompilieren und Paketieren der Entwicklungsumgebung der folgende Fehler gemeldet:
Um den Fehler zu beheben und die Codegröße zu reduzieren, können wir die Konfigurationselemente mit demselben Ziel zusammenführen. Wie wir oben sehen können, handelt es sich dabei eigentlich um einen regulären Matching-Prozess, sodass wir zum Zusammenführen die reguläre Syntax verwenden können:
Proxy: {
'/api/Aktion|/api/Aktion3': {
Ziel: 'http://192.191.1.3',
changeOrigin: wahr,
ws: wahr,
sicher: falsch
},
'/api/Aktion2|/api/Aktion4'': {
Ziel: 'http://192.191.1.4',
changeOrigin: wahr,
ws: wahr,
sicher: falsch
},
'/api/action5|/api/action7': {
Ziel: 'http://192.191.1.5',
changeOrigin: wahr,
ws: wahr,
sicher: falsch
},
'/api/action6|/api/action8': {
Ziel: 'http://192.191.1.6',
changeOrigin: wahr,
ws: wahr,
sicher: falsch
},
'/api/action9': {
Ziel: 'http://192.191.1.7',
changeOrigin: wahr,
ws: wahr,
sicher: falsch
},
'/api': {
Ziel: 'http://192.191.1.2',
changeOrigin: wahr,
ws: wahr,
sicher: falsch
},
'/': {
Ziel: 'http://192.191.1.1',
changeOrigin: wahr,
ws: wahr,
sicher: falsch
},
}
Natürlich muss das Backend auch bei der offiziellen Bereitstellung weiterhin als einheitlicher Agent fungieren. Das Obige ist meine persönliche Erfahrung. Ich hoffe, es kann Ihnen als Referenz dienen. Ich hoffe auch, dass Sie 123WORDPRESS.COM unterstützen werden. Das könnte Sie auch interessieren:
|
<<: Detaillierte Erklärung einer Methode zum Umbenennen von Prozeduren in MySQL
>>: Detaillierter Beispielcode einer MySQL-Batch-Einfügeschleife
Artikel empfehlen
Detaillierte Erklärung des Vue Notepad-Beispiels
In diesem Artikelbeispiel wird der spezifische Co...
Verwenden Sie href, um durch einfaches Klicken auf einen Link zu einer bestimmten Stelle auf der Seite zu springen
Nachdem Sie auf der Seite auf das a-Tag geklickt h...
So betreiben Sie eine MySQL-Datenbank mit dem ORM-Modell-Framework
Was ist ORM? ORM steht für Object Relational Mapp...
Beispiel für das Hochladen von Dateien mit Vue unter Verwendung des Formattyps „formData“
In Vue haben wir im Allgemeinen Front-End- und Ba...
Fallstudie zu JavaScript Anti-Shake
Prinzip Das Prinzip von Anti-Shake ist: Du kannst...
So implementieren Sie einen binären Suchbaum mit JavaScript
Eine der am häufigsten verwendeten und diskutiert...
Bedingte Kommentare im Internet Explorer für XHTML
<br />Bedingte Kommentare sind eine einzigar...
Implementierung der Änderung von Konfigurationsdateien im Docker-Container
1. Betreten Sie den Container docker run [Option]...
JS erkennt den Fall der Eliminierung von Sternen
In diesem Artikelbeispiel wird der spezifische JS...
So verwenden Sie Docker, um Containerressourcen zu begrenzen
Problem beim Gucken Angenommen, der IIS-Dienst st...
js zur Realisierung des Mausverfolgungsspiels
In diesem Artikel wird der spezifische Code von j...
Lösungen zur Verarbeitung und Reparatur historischer Linux-Images
Der ECS-Cloud-Server, der mit dem historischen Li...
Bootstrap realisiert den Karusselleffekt
In diesem Artikel wird der spezifische Code von B...
Analyse der MySQL-Methode zur Implementierung des Fuzzy-String-Ersatzes basierend auf regulären Ausdrücken
In diesem Artikel wird anhand eines Beispiels bes...
Detaillierte Erklärung des Plattformbusses des Linux-Treibers
Inhaltsverzeichnis 1. Einführung in den Plattform...