Comment utiliser le proxy http dans webpack-dev-server (tutoriel détaillé)

Cet article présente principalement l'explication détaillée de l'utilisation du proxy http par webpack-dev-server pour résoudre les problèmes inter-domaines. Maintenant, je le partage avec vous et vous donne une référence.

Documentation

Introduction officielle de webpack au proxy d'ouverture de webpack-dev-server

Vue-cli proxyTable résout les problèmes inter-domaines dans l'environnement de développement— —Bien que cet article soit écrit à propos de vue, il peut être utilisé sur webpack-dev-server de la même manière

http-proxy-middleware——La méthode d'implémentation de webpack-dev-server est en fait une encapsulation de ceci

Configurer le proxy http

Configurez-le dans le fichier de configuration du webpack (webpack.config.js)

module.exports = {
 ...此处省略一万字

 // webpack-dev-server的配置
 devServer: {
 historyApiFallback: true,
 hot: true,
 inline: true,
 progress: true,
 port: 3000,
 host: '10.0.0.9',
 proxy: {
 '/test/*': {
 target: 'http://localhost',
 changeOrigin: true,
 secure: false
 }
 }
 },

 ...此处省略一万字
};

Dans la configuration ci-dessus , concernant http -Proxy n'est que la valeur dans proxy : {...}

Interface d'appel

Pour plus de commodité, ce qui suit utilise la fonction ajax encapsulée par jquery pour démonstration

$.ajax({
 // url: 'http://10.0.0.9:3000/test/testFetch/Login.php', // 这样不行
 url: '/test/testFetch/Login.php', // 这样行
 type: 'post',
 data: {
 app_id: '13751313169',
 password: '123456',
 user_name: 'Nicholas'
 },
 success: function(data) {
 console.log(data);
 }
});

Partie de la description du paramètre dans proxy

'/test/*' et cible : 'http://localhost'

D'après le nom, on peut voir que cela redirige en fait le nom de domaine de l'API correspondant au format '/test/*' vers 'http://localhost'

1. combiné avec l'"interface d'appel" ci-dessus. On peut voir que l'url de la phrase : '/test/testFetch/Login.php' ajoutera en fait automatiquement le préfixe, c'est-à-dire que l'url : '/test/testFetch/Login.php' est équivalent à l'url : ' http://10.0.0.9:3000/test/testFetch/Login.php'

2. Cependant, nous utilisons le proxy http pour la redirection, dans ce cas, l'url : '/test /testFetch/Login.php' équivaut à l'url : 'http://localhost/test/testFetch/Login.php'

changeOrigin

1. true/false, Par défaut : false - change l'origine de l'en-tête de l'hôte en URL cible

2. Un serveur virtuel local recevra votre demandez et envoyez la demande en votre nom - c'est ce que disent les autres

3. Je l'ai essayé, même si ce paramètre est défini sur faux, c'est OK dans certains cas. La raison spécifique est. inconnu, donc je l'ai toujours défini. Réglez-le sur true

secure

1. true/false, si vous le souhaitez vérifier les certificats SSL

pathRewrite

1. Exemple : pathRewrite : {'^/api' : ''}

2. Les clés d'objet seront utilisées comme RegExp pour faire correspondre les chemins

3. Je suppose que voici pour remplacer '^/api' par '' ( juste mon hypothèse, pas de succès, je suppose que c'est parce que je ne suis pas doué pour écrire des expressions régulières)

Vous trouverez ci-joint le code pour utiliser l'API Fetch

Le code ci-dessus et "l'interface d'appel" L'effet obtenu en utilisant $.ajax() est le même

let testAsync = async function () {
 var feeling = {
 app_id: '13751313169',
 password: '123456',
 user_name: 'Nicholas'
 };

 var fetchParams = {
 method: 'post',
 headers: {
 'Accept': 'application/json',
 'Content-Type': 'application/json'
 },
 credentials: 'include', // 将凭证也带上（例如cookies）
 body: JSON.stringify(feeling),
 };

 let temp = await fetch('/test/testFetch/Login.php', fetchParams).then(response => response.text());

 console.log(temp); // 这个就是一个json对象

 return temp;
};

let data = testAsync(); // async函数返回值是一个Promise对象

console.log(data); // 这个是一个Promise对象

Ce qui précède est ce que j'ai compilé pour tout le monde, j'espère que cela sera utile. à tout le monde à l'avenir.

Articles associés :

Comment surveiller window.resize dans VueJs et comment l'implémenter spécifiquement ?

Explication détaillée du concept d'objet window $window dans AngularJS

Comment implémenter le pontage React-native Android et quels sont les spécificités mesures?

Comment développer une directive personnalisée dans vue

Comment développer une directive personnalisée dans vue

Interprétation détaillée de la façon dont les fenêtres parent-enfant layui transmettent les paramètres

Comment implémenter l'affichage adaptatif des images des composants d'image dans l'applet WeChat

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!