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
Lösen Sie das Problem des hässlichen blauen Rahmens nach dem Hinzufügen eines Hyperlinks zum HTML-Bild img
HTML-Bild erzeugt nach dem Hinzufügen eines Hyper...
Der Unterschied zwischen ID- und Name-Attributen von HTML-Elementen
Heute bin ich etwas verwirrt über <a href="...
Detaillierte Erläuterung des Implementierungsbeispiels für die Gruppenrangfolge im MySQL-Tutorial
Inhaltsverzeichnis 1. Datenquelle 2. Gesamtrangfo...
Detaillierte Erläuterung der Kommunikation zwischen Angular-Eltern- und -Kindkomponenten
Inhaltsverzeichnis Überblick 1. Übersicht über Ei...
Dateifreigabe zwischen Ubuntu und Windows unter VMware
In diesem Artikel wird die Methode zum Teilen von...
Tiefgreifendes Verständnis der Verwendung von Vue
Inhaltsverzeichnis Verstehen Sie das Kernkonzept ...
Detaillierte Analyse der Auswahl des MySQL-Gemeinschaftsindex und des eindeutigen Index
Nehmen wir ein Benutzerverwaltungssystem an, bei ...
MySQL MSI Installations-Tutorial unter Windows 10 mit Bildern und Text
1. Herunterladen 1. Klicken Sie auf den neuesten ...
VMware-Installation der virtuellen CentOS-Maschine und grafisches Tutorial zur Netzwerkkonfiguration
1. Laden Sie das CentOS-Image herunter 1.1 Downlo...
Beispiel für eine MySQL-DML-Sprachoperation
Zusätzliche Erklärung, Fremdschlüssel: Verwenden ...
Untersuchung der drei zugrunde liegenden Mechanismen der globalen Statusverwaltung von React
Inhaltsverzeichnis Vorwort Requisiten Kontext Zus...
Erläuterung des Beispiels einer MySQL-Datenanalyse-Speicher-Engine
Inhaltsverzeichnis 1. Fälle vorstellen 2. Zeigen ...
Lösung für das Problem, dass Vue-Binding-Objekte und Array-Variablen nach der Änderung nicht gerendert werden können
Projektszenario: Auf der Seitenanzeige befindet s...
Centos7-Konfiguration, Fastdfs und Analyse des Implementierungsprozesses des verteilten Dateispeichersystems Nginx
1. Installieren Sie libfastcommon-1.0.43. Das Ins...
Detaillierte Erklärung zur Verwendung von Bussen in Vue
Vue-Busmechanismus (Bus) Zusätzlich zur Verwendun...