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'

1. 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'

2. 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

1. true/false, Default: false - changes the origin of the host header to the target URL

2. The local virtual server will receive your request and send the request on your behalf - this is what others say

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

1. true/false, if you want to verify the SSL Certs
   

##pathRewrite

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

2. Object-keys will be used as RegExp to match paths

3. I guess, '^/api' is replaced by '' here (it's just my guess, it didn't work, I guess it's because my regular expression is not good)

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!