Comment Vue-cli proxyTable résout les problèmes inter-domaines dans l'environnement de développement

Cet article présente principalement l'explication détaillée de Vue-cli proxyTable pour résoudre les problèmes inter-domaines dans l'environnement de développement. Il est d'une grande valeur pratique. Les amis qui en ont besoin peuvent s'y référer.

Je le fais toujours. J'y suis confronté lors du débogage conjoint avec le backend. Problème inter-domaines ennuyeux, j'ai également rencontré ce problème récemment lors du développement d'un projet basé sur Vue. Les deux parties ont pensé à de nombreuses méthodes, vérifié beaucoup d'informations et ajouté de nombreux paramètres. . Au final, j'ai dû mapper mon hôte local sur celui lors de sa mise en ligne. Le nom de domaine à utiliser.

En parcourant le code aujourd'hui, j'ai soudainement découvert qu'il y avait un paramètre appelé proxyTable dans le fichier de configuration de vue-cli, j'ai senti que cela pourrait résoudre le problème. , alors je l'ai cherché, et bien sûr. Dans vuejs-templates, qui est le plug-in de modèle utilisé par vue-cli, il existe des instructions sur le proxy API, et ce paramètre est utilisé.

https://vuejs-templates.github.io/webpack/proxy.html

Ce paramètre est principalement une table de mappage d'adresses, vous pouvez définir le complexe Le L'URL est simplifiée. Par exemple, l'adresse que nous souhaitons demander est api.xxxxxxxx.com/list/1, qui peut être définie comme suit :

proxyTable: {
 '/list': {
  target: 'http://api.xxxxxxxx.com',
  pathRewrite: {
   '^/list': '/list'
  }
 }
}

De cette façon, lors de la rédaction de l'URL, il suffit d'écrire /list/1 pour représenter api.xxxxxxxx.com/list/1.

Alors, comment résoudre le problème inter-domaines ? En fait, il y a un paramètre changeOrigin dans le paramètre 'list' ci-dessus, qui reçoit une valeur booléenne. S'il est défini sur true, alors un serveur virtuel local recevra votre demande et enverra la demande en votre nom, afin qu'il y en ait. ne pas être multi-domaines. Le problème est que, bien sûr, cela ne s'applique qu'aux environnements de développement. Le code ajouté est le suivant :

proxyTable: {
 '/list': {
  target: 'http://api.xxxxxxxx.com',
  changeOrigin: true,
  pathRewrite: {
   '^/list': '/list'
  }
 }
}

Ce paramètre de vue-cli provient du plug-in http-proxy-middleware qu'il utilise

github : https://github.com/chimurai/http-proxy-middleware

Si vous souhaitez en savoir plus, vous pouvez lire les instructions de configuration du plug-in . Il semble également prendre en charge Websocket, qui est un plug-in très puissant.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

À propos de l'opération de soumission de données pour l'interaction des données front-end et back-end de vue.js

Comment résoudre vue - Problème selon lequel le stylet ne peut pas être utilisé dans cli

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!