Ausführliche Erklärung des Webpack-Dev-Servers, der http-Proxy verwendet, um domänenübergreifende Probleme zu lösen

In diesem Artikel wird hauptsächlich die Verwendung von http-Proxy durch den Webpack-Dev-Server zur Lösung domänenübergreifender Probleme ausführlich erläutert. Der Herausgeber findet ihn recht gut, daher werde ich ihn jetzt mit Ihnen teilen und als Referenz verwenden . Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Dokumentationsmaterial

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

Vue-cli-Proxytabelle löst Entwicklungskreuz -Domänenprobleme in der Umgebung – obwohl dieser Artikel für Vue geschrieben wurde, wird er auch auf Webpack-Dev-Server verwendet

http-proxy-middleware – Implementierung von Webpack-Dev-Server Die Methode ist eigentlich um dies zu kapseln

HTTP-Proxy konfigurieren

und in der Webpack-Konfigurationsdatei (webpack.config.js)

zu konfigurieren

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 ist das Einzige an http-proxy der Wert in Proxy: {...}

Call interface

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

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

Beschreibung einiger Parameter im Proxy

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

Wie Sie am Namen erkennen können, ist dies tatsächlich der Domänenname, der der API im Format entspricht '/test/*' Weiterleitung zu 'http://localhost'

1. In Kombination mit der obigen „Aufrufschnittstelle“ ist ersichtlich, dass die Satz-URL: „/test/testFetch /Login.php' tatsächlich Das Präfix wird automatisch hinzugefügt, das heißt, URL: '/test/testFetch/Login.php' entspricht URL: 'http://10.0.0.9:3000/test/testFetch/Login. php'

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

changeOrigin

1. true/false, Standard: false – Änderungen der Ursprung des Host-Headers zur Ziel-URL

2. Ein lokaler virtueller Server empfängt Ihre Anfrage und sendet die Anfrage in Ihrem Namen – das sagen andere

3. Ich habe es versucht, und selbst wenn dieser Parameter auf „false“ gesetzt ist, ist es in einigen Fällen immer noch möglich. Der genaue Grund ist unbekannt, daher ist es besser, ihn auf „true“ zu setzen

sicher

1. wahr/falsch, wenn Sie die SSL-Zertifikate überprüfen möchten
   

pathRewrite

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

2. Objektschlüssel werden sein wird als RegExp verwendet, um Pfade abzugleichen

3. Ich schätze, „^/api“ wird hier durch „“ ersetzt (es ist nur meine Vermutung, es hat nicht funktioniert, ich schätze, es liegt an meinem regulären Ausdruck ist nicht gut)

Angehängt ist der Code für die Verwendung der Fetch-API

Der obige Code hat den gleichen Effekt wie die Verwendung von $.ajax () in der „Anrufschnittstelle“

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

Verwandte Empfehlungen:

Über vue2.0-Einstellung von ProxyTable mit Axios für domänenübergreifende Anfragen

Beispielcode für die PHP-Proxy-Erkennung

Detaillierte Erklärung, wie Python-Crawler Proxy-Proxy zum Crawlen von Webseiten verwenden

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung des Webpack-Dev-Servers, der http-Proxy verwendet, um domänenübergreifende Probleme zu lösen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!