vue2.0 reverse proxy pour résoudre les problèmes de cross domain (vue reverse proxy configuration)

Bonjour à tous ! Aujourd'hui, je viens partager avec vous le proxy inverse de vue2.0 pour résoudre le problème du cross domain, c'est-à-dire la méthode de configuration du proxy inverse de vue. J'espère que cela peut vous aider à résoudre certains problèmes dans le développement.

vue2.0 reverse proxy pour résoudre les problèmes de cross domain (vue reverse proxy configuration)

Tout d'abord, voyons ce qu'est le cross-domain. Dans le développement frontal, nous rencontrons souvent cette situation : lorsque notre code frontal (tel que basé sur le développement du framework Vue.js) est déployé dans un nom de domaine, tandis que notre interface back-end est déployée dans un autre nom de domaine, il y aura cette fois une situation cross-domain. À ce moment-là, le navigateur empêchera notre code frontal d'accéder à l'interface sous un domaine différent pour des raisons de sécurité, ce qui entraînera des problèmes pour notre développement.

Alors comment résoudre ce problème de cross-domain ? Il s'agit de mentionner le proxy inverse de vue2.0. Ce qu'on appelle le reverse proxy, c'est comme si c'était notre petite secrétaire de la réception, elle reçoit les clients qui visitent la réception, et les clients qui trouvent l'interface d'arrière-plan, elle les aide à transférer, de sorte que les clients et l'arrière-plan n'ont pas besoin de parler directement, ce qui réduit grandement les problèmes inutiles.

Comment le configurer exactement ? Nous pouvons utiliser proxyTable dans le fichier index.js du dossier config pour le configurer. Regardons l'exemple de code :

"`javascript
module.exports = {
dev : {
proxyTable : {
'/api' : {
target : 'http://localhost:3000', // remplir le nom de domaine de l'interface backend
changeOrigin : true, // si cross-domain ou non
pathRewrite : {
'^/api' : " // Réécrire le chemin pour supprimer /api
}
}
}
}
}
“`

Dans cet exemple de code, nous transmettons toutes les requêtes commençant par /api à http://localhost:3000这个域名下 et effectuons une réécriture du chemin d'accès. De cette manière, notre code frontal peut accéder à l'interface du backend sans aucun problème.

remarques finales

En configurant le proxy inverse de vue2.0, nous avons résolu avec succès le problème du cross-domain, de sorte que le code front-end peut accéder sans problème à l'interface back-end sous différents noms de domaine, ce qui améliore grandement l'efficacité du développement et évite les problèmes inutiles. J'espère que cette petite astuce pourra vous aider, afin que le développement du front-end se fasse de plus en plus facilement ! Bravo !