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
JavaScript-Puzzlespiel
In diesem Artikelbeispiel wird der spezifische Ja...
CentOS 8 ist jetzt verfügbar
CentOS 8 ist jetzt verfügbar! Die Versionen von C...
Verwendung des Linux-Befehls ifconfig
1. Befehlseinführung Der Befehl ifconfig (Netzwer...
Das Problem, dass Formularelemente und Eingabeaufforderungstext nicht ausgerichtet sind
In den letzten Projekten werden viele Formulare e...
Detaillierte Erklärung der Verwendung des SS-Befehls in Linux in Kombination mit Zabbix zum Überwachen von Sockets
Inhaltsverzeichnis Vorwort 1. SS-Befehl 2. Gesamt...
Häufige Linux-Fehler bei der chinesischen Übersetzung (Neulinge müssen das wissen)
1.Befehl nicht gefunden Befehl nicht gefunden 2. ...
Details zur MySQL-Sortierfunktion
Inhaltsverzeichnis 1. Problemszenario 2. Ursachen...
So bereinigen Sie schnell Milliarden von Daten in einer MySQL-Datenbank
Heute habe ich eine Festplattenalarm-Ausnahme erh...
Detaillierte Einführung in CSS-Schrift-, Text- und Listeneigenschaften
1. Schrifteigenschaften Farbe, gibt die Farbe des...
Detaillierte Zusammenfassung häufig verwendeter MySQL-Funktionen
Inhaltsverzeichnis Allgemeine MySQL-Funktionen 1....
Beispiel zum Aktivieren langsamer Abfragen in MySQL
Vorwort Das langsame Abfrageprotokoll ist eine se...
So installieren Sie Docker auf Raspberry Pi
Da Raspberry Pi auf der ARM-Architektur basiert, ...
Häufig verwendete höherwertige Funktionen und umfassende Beispiele in Vue
1. Häufig verwendete höherwertige Funktionen von ...
Beheben von Problemen beim Importieren und Exportieren von Mysql
Hintergrund Da ich alle meine Aufgaben auf Docker...
Zusammenfassung der Erfahrungen und Fähigkeiten von Webdesignern beim Erlernen von Webdesign
Da der Einfluss des Unternehmens wächst und seine...