Heim >Web-Frontend >js-Tutorial >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“
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'
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
true/false, Standard: false – ändert den Ursprung des Host-Headers in die Ziel-URL
Der lokale virtuelle Server empfängt Ihre Anfrage und sendet sie es in Ihrem Namen Anfrage - Das sagen andere
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
Beispiel: pathRewrite: {'^/api': ''}
Objektschlüssel werden als RegExp verwendet, um Pfade abzugleichen
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.
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 VueSo entwickeln Sie eine benutzerdefinierte Direktive-Direktive in VueDetaillierte Interpretation, wie Laui-Eltern-Kind-Fenster Parameter übergebenSo implementieren Sie die adaptive Anzeige von Bildkomponentenbildern im WeChat-AppletDas 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!