Comment utiliser Webpack pour gérer les requêtes inter-domaines

Cette fois, je vais vous montrer comment utiliser webpack pour gérer les requêtes inter-domaines, et quelles sont les précautions à prendre pour utiliser webpack pour gérer les requêtes inter-domaines. Ce qui suit est un cas pratique, jetons un coup d'œil.

Lors du débogage front-end, l'inter-domaine a toujours été un problème gênant. Certaines méthodes possibles ont été discutées dans l'article précédent sur une solution aux problèmes inter-domaines.

Si vous souhaitez utiliser JSONP, la première chose est qu'il y a beaucoup de choses à modifier, et ce n'est pas conforme à la tendance générale du développement front-end. Si vous utilisez CORS, là. n'est pas de type application/json. Et plus important encore, ce n'est qu'une exigence pendant le débogage du front-end, pas après sa mise en ligne, il n'est donc pas bon d'avoir trop d'intrusions dans le back-end.

Alors une pensée m'a soudainement traversé l'esprit : l'ajout d'un agent ne résoudrait-il pas ce problème ? Mais après y avoir réfléchi, c'était assez difficile à écrire, alors je l'ai mis en attente.

Jusqu'à il y a quelques jours, Stone mentionnait que webpack-dev-server y avait déjà pensé et l'avait déjà implémenté pour nous.

Donc, je l'ai testé dans un projet Vue et j'ai trouvé que c'était vraiment génial. Il peut non seulement charger à chaud le serveur local, mais aussi appeler directement l'API distante entre les domaines, ce qui a parfaitement résolu tous les problèmes que j'ai rencontrés. rencontré auparavant.

Ensuite, je présenterai brièvement les étapes (en prenant comme exemple un projet webpack construit avec Vue scaffolding) :

Vérifiez d'abord s'il y a

proxy: config.dev.proxyTable,

Si cet élément de configuration est commenté, veuillez ouvrir le commentaire. Sinon, veuillez l'ajouter à l'objet devServer

Ajoutez ensuite l'élément de configuration proxyTable à l'objet dev dans config/index. .js :

proxyTable: {
   '/**': {
    target: 'http://api.xxx.com',
    changeOrigin: true,
    secure: false
   }
  },

La clé /** devant signifie proxy toutes les requêtes. Si vous proxyez certaines requêtes, vous pouvez la remplacer par une chaîne telle que /api. La cible après

est le site Web à proxy. changeOrigin signifie modifier le champ Origin dans la requête http Lorsque le navigateur reçoit la réponse du back-end, le navigateur pensera qu'il s'agit d'une requête locale. le back-end, cela sera considéré comme un appel au sein du site.

De cette manière, grâce à cette configuration simple, le problème cross-domain est parfaitement résolu. Après

, lorsque vous exécutez

npm run dev

directement, vous pouvez transmettre la requête ajax dans le front-end de test au serveur back-end pour le tester !

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Utiliser Js pour implémenter la bibliothèque Promise

Comment recadrer des images dans React

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!