Explication détaillée de webpack-dev-server utilisant le proxy http pour résoudre les problèmes inter-domaines

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. L'éditeur pense que c'est assez bon, je vais donc le partager avec vous maintenant et le donner comme référence. . Suivons l'éditeur pour y jeter un œil, j'espère que cela pourra aider tout le monde.

Matériel de documentation

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

Vue-cli proxyTable résout le développement Cross -problèmes de domaine dans l'environnement - bien que cet article soit écrit pour vue, il est également utilisé sur webpack-dev-server

http-proxy-middleware - implémentation de webpack-dev-server La méthode est en fait, pour encapsuler cela

configurez le proxy http

et 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, la seule chose à propos de http-proxy est la valeur dans proxy : {...}

Interface d'appel

Par souci de commodité, ce qui suit utilise la fonction ajax encapsulée par jquery pour la 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);
 }
});

Description de certains paramètres dans le proxy

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

Comme vous pouvez le voir d'après le nom, il s'agit en fait du nom de domaine qui correspondra à l'API au format de '/test/*' Redirection 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' en fait Le préfixe sera automatiquement ajouté, 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' est équivalent à l'url : 'http://. localhost/test/testFetch/ Login.php'

changeOrigin

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

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

3. Je l'ai essayé, et même si ce paramètre est défini sur false, c'est toujours possible dans certains cas. La raison spécifique est inconnue, il est donc préférable de le définir sur true

sécurisé

1. vrai/faux, si vous souhaitez vérifier les certificats SSL

   
   

pathRewrite

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

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

3. Je suppose que '^/api' est remplacé par '' ici (c'est juste mon hypothèse, ça n'a pas fonctionné, je suppose que c'est parce que mon habitué l'expression n'est pas bonne)

Ci-joint le code pour utiliser l'API Fetch

Le code ci-dessus a le même effet que l'utilisation de $.ajax () dans "Interface d'appel"

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对象

Recommandations associées :

À propos de la configuration de proxyTable par vue2.0 à l'aide d'axios pour requêtes inter-domaines

Exemple de code de détection de proxy PHP

Explication détaillée de la façon dont les robots d'exploration Python utilisent le proxy proxy pour explorer les pages Web

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!