How to use http-proxy in webpack-dev-server (detailed tutorial)

This article mainly introduces the detailed explanation of webpack-dev-server's use of http-proxy to solve cross-domain problems. Now I share it with you and give you a reference.

Documentation

webpack's official introduction to webpack-dev-server opening proxy

Vue-cli proxyTable solves cross-domain problems in the development environment— —Although this article is written about vue, it can be used on webpack-dev-server in the same way

http-proxy-middleware——The implementation method of webpack-dev-server is actually an encapsulation of 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, about http-proxy It’s just 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);
 }
});

Some parameter descriptions in proxy

'/test/*' and target: 'http://localhost'

It can be seen from the name, This actually redirects the domain name of the API matching the format of '/test/*' to 'http://localhost'

1. You can see it in combination with the "call interface" above. 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 it on your behalf Request - This is what others say

3. I tried it, even if this parameter is set to false, it is OK 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 '' (just my guess, it didn't work, I guess it's me The regular expression cannot be written well)

Attached is the code for using the Fetch API

The above code and the "call interface" use $. The effect achieved by ajax() is the same

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

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to monitor window.resize in VueJs and how to implement it specifically?

Detailed interpretation of the concept of $window window object in AngularJS

How to implement React-native bridging to Android, and what are the specific steps?

How to develop a custom instruction directive in vue

How to develop a custom instruction directive in vue

Detailed interpretation of how layui parent-child windows pass parameters

How to implement image component image adaptive display in WeChat applet

The above is the detailed content of How to use http-proxy in webpack-dev-server (detailed tutorial). For more information, please follow other related articles on the PHP Chinese website!