vue2.0 Reverse Proxy zur Lösung von Cross Domain (vue Reverse Proxy Konfiguration)

Hallo zusammen! Heute komme ich, um mit Ihnen über vue2.0 Reverse-Proxy zu teilen, um die Cross-Domain-Problem zu lösen, das heißt, die Methode der vue Reverse-Proxy-Konfiguration. Ich hoffe, es kann Ihnen helfen, einige Probleme in der Entwicklung zu lösen.

vue2.0 Reverse Proxy zur Lösung von Cross Domain (vue Reverse Proxy Konfiguration)

Lassen Sie uns zunächst einmal besprechen, was Cross-Domain ist. In der Front-End-Entwicklung treffen wir oft auf diese Situation: Wenn unser Front-End-Code (z. B. basierend auf der Entwicklung des Vue.js-Frameworks) in einem Domain-Namen bereitgestellt wird, während unsere Back-End-Schnittstelle in einem anderen Domain-Namen bereitgestellt wird, gibt es diesmal eine Cross-Domain-Situation. Zu diesem Zeitpunkt verhindert der Browser aus Sicherheitsgründen, dass unser Front-End-Code auf die Schnittstelle unter einer anderen Domain zugreift, was einige Probleme für unsere Entwicklung mit sich bringt.

Wie löst man also dieses domänenübergreifende Problem? Dies ist zu erwähnen, die Reverse-Proxy von vue2.0. Die so genannte Reverse-Proxy, als ob es unsere kleine Sekretärin der Rezeption waren, empfängt sie Gäste besuchen die Rezeption, und die Gäste, die Hintergrund-Schnittstelle zu finden, wird sie helfen, zu übertragen, so dass die Gäste und der Hintergrund nicht brauchen, um direkt zu sprechen, stark reduziert die unnötige Mühe.

Wie kann man es genau konfigurieren? Wir können proxyTable in der index.js-Datei im config-Ordner zur Konfiguration verwenden. Schauen wir uns den Beispielcode an:

"javascript
module.exports = {
dev: {
proxyTable: {
'/api': {
target: 'http://localhost:3000', // Geben Sie den Domänennamen der Backend-Schnittstelle ein
changeOrigin: true, // ob domänenübergreifend oder nicht
pathRewrite: {
^/api': " // Den Pfad umschreiben, um /api zu entfernen
}
}
}
}
}
“`

In diesem Beispielcode leiten wir alle Anfragen, die mit /api beginnen, an http://localhost:3000这个域名下 weiter und schreiben einige Pfade um. Auf diese Weise kann unser Front-End-Code ohne Probleme auf die Back-End-Schnittstelle zugreifen.

Schlussbemerkungen

Durch die Konfiguration der Reverse-Proxy von vue2.0, haben wir erfolgreich das Problem der Cross-Domain gelöst, so dass die Front-End-Code kann reibungslos auf die Backend-Schnittstelle unter verschiedenen Domain-Namen, die stark verbessert die Entwicklung Effizienz und vermeidet unnötige Probleme. Ich hoffe, dieser kleine Trick kann Ihnen helfen, so dass Sie in der Front-End-Entwicklung der Straße mehr und mehr reibungslos! Jubel Oh!