So verwenden Sie http-Proxy im Webpack-Dev-Server (ausführliches Tutorial)

Dieser Artikel stellt hauptsächlich die detaillierte Erklärung der Verwendung von http-Proxy durch den Webpack-Dev-Server zur Lösung domänenübergreifender Probleme vor. Jetzt teile ich ihn mit Ihnen und gebe Ihnen eine Referenz.

Dokumentation

Webpacks offizielle Einführung in den Webpack-Dev-Server-Eröffnungs-Proxy

Vue-cli ProxyTable löst domänenübergreifende Probleme in der Entwicklungsumgebung – —Obwohl dieser Artikel über Vue geschrieben wurde, kann er auf die gleiche Weise auf dem Webpack-Dev-Server verwendet werden

http-proxy-middleware——Die Implementierungsmethode des Webpack-Dev-Servers ist eigentlich eine Kapselung von this

Konfigurieren Sie den http-Proxy

Konfigurieren Sie ihn in der Webpack-Konfigurationsdatei (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
 }
 }
 },

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

In der obigen Konfiguration ungefähr http-proxy Es ist nur der Wert in Proxy: {...}

Call interface

Der Einfachheit halber wird im Folgenden die von jquery gekapselte Ajax-Funktion verwendet zur Demonstration

$.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);
 }
});

Teil der Parameterbeschreibung im Proxy

'/test/*' und Ziel: 'http://localhost'

Dies ist aus dem Namen ersichtlich. Dadurch wird der Domänenname der API, der dem Format „/test/*“ entspricht, tatsächlich zu „http://localhost“

1. in Kombination mit dem umgeleitet Über „Aufrufschnittstelle“ können Sie sehen: Der Satz „URL: ‚/test/testFetch/Login.php‘ fügt tatsächlich automatisch das Präfix hinzu, das heißt, URL: ‚/test/testFetch/Login.php‘ entspricht der URL : 'http:// 10.0.0.9:3000/test/testFetch/Login.php'

2. Wir verwenden jedoch http-Proxy für die Umleitung, in diesem Fall URL: '/ test/testFetch/Login .php' entspricht der URL: 'http://localhost/test/testFetch/Login.php'

changeOrigin

1. true/false, Standard: false – ändert den Ursprung des Host-Headers in die Ziel-URL

2. Der lokale virtuelle Server empfängt Ihre Anfrage und sendet sie es in Ihrem Namen Anfrage - Das sagen andere

3. Ich habe es versucht, auch wenn dieser Parameter auf false gesetzt ist, ist es in einigen Fällen in Ordnung. Der genaue Grund ist also unbekannt Es ist besser, es auf „true/false“ zu setzen, wenn Sie das überprüfen möchten SSL-Zertifikate

pathRewrite

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

Objektschlüssel werden als RegExp verwendet, um Pfade abzugleichen

Ich vermute, „^/api“ wird durch „“ ersetzt (nur meine Vermutung, Es hat nicht funktioniert, ich schätze, ich bin es) Der reguläre Ausdruck kann nicht gut geschrieben werden)
2. Angehängt ist der Code, der die Fetch-API verwendet

Der obige Code verwendet $. Der von ajax() erzielte Effekt ist derselbe.

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

   Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

   Verwandte Artikel:

   Wie überwache ich window.resize in VueJs und wie setze ich es konkret um?

   Detaillierte Interpretation des Konzepts des $window-Fensterobjekts in AngularJS
   Wie implementiert man React-native Bridging Android und was sind die Besonderheiten? Schritte?
   So entwickeln Sie eine benutzerdefinierte Direktive-Direktive in Vue
   So entwickeln Sie eine benutzerdefinierte Direktive-Direktive in Vue
   Detaillierte Interpretation, wie Laui-Eltern-Kind-Fenster Parameter übergeben
   So implementieren Sie die adaptive Anzeige von Bildkomponentenbildern im WeChat-Applet

   Das obige ist der detaillierte Inhalt vonSo verwenden Sie http-Proxy im Webpack-Dev-Server (ausführliches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!