Home > Article > Web Front-end > Detailed explanation of webpack-dev-server using http-proxy to solve cross-domain problems
This article mainly introduces the detailed explanation of webpack-dev-server's use of http-proxy to solve cross-domain problems. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.
Documentation information
webpack's official introduction to webpack-dev-server opening proxy
Vue-cli proxyTable solves development Cross-domain issues in the environment - although this article is written about vue, it is also used on webpack-dev-server.
http-proxy-middleware - implementation of webpack-dev-server The method is actually to encapsulate this
Configure http-proxy
Configure in the webpack configuration file (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 the above configuration, the only thing about http-proxy is the value in proxy: {...}
Calling interface
For the sake of convenience, the following uses the ajax function encapsulated by jquery for 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); } });
Part of the parameter description in proxy
'/ test/*' and target: 'http://localhost'
As you can see from the name, this actually redirects the domain name of the API matching the format of '/test/*' to ' http://localhost'
Combined with the above "call interface", it can be seen that the sentence url: '/test/testFetch/Login.php' will actually automatically add the prefix , that is to say, url: '/test/testFetch/Login.php' is equivalent to url: 'http://10.0.0.9:3000/test/testFetch/Login.php'
However, we use http-proxy for redirection. In this case, url: '/test/testFetch/Login.php' is equivalent to url: 'http://localhost/test/testFetch/Login.php'
changeOrigin
true/false, Default: false - changes the origin of the host header to the target URL
The local virtual server will receive your request and send the request on your behalf - this is what others say
I tried it For a moment, even if this parameter is set to false, it is possible in some cases. The specific reason is unknown, so it is better to set it to true.
secure
true/false, if you want to verify the SSL Certs
##pathRewrite
Attached is the code for using the Fetch API
The above code has the same effect as using $.ajax() in the "Calling Interface"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对象Related recommendations:
About vue2.0 setting proxyTable to use axios for cross-domain requests
php detect proxy instance code
Detailed explanation of how Python crawlers use proxy to crawl web pages
The above is the detailed content of Detailed explanation of webpack-dev-server using http-proxy to solve cross-domain problems. For more information, please follow other related articles on the PHP Chinese website!