最近在接到一个需求是做一个可视化的监控系统，mock数据来开发的话实在不太方便，况且数据量之大。查了一下资料，可以用webpack-dev-server作为代理，直接请求线上，哈哈哈，是不是很方便。
### 目前我用的是webpack 4.41.2。具体步骤如下：
1、首先你需要配置host，我用的是SwitchHost

127.0.0.1 localhost xhm.tb.com 

2、在webpack devServer配置如下

const packobjPLus={url:'http://play.m.tb.com/',api:['/user']} devServer: {host: 'xhm.tb.com', //主机地址,这个和第一步SwitchHost 配置的域名是一样的。proxy: [{target: packobjPLus.url,changeOrigin: true,//   secure:true,bypass: function (req, res, proxyOptions) {let url = packobjPLus.url;req.headers['origin'] = url;req.headers['host'] = url;req.headers['referer'] = url;},},],}

当页面请求 /user/XX 会被代理到 http://play.m.tb.com/user/XX
是不是很简单呢

### 配置中主要的参数说明
1、target:代理的API,就是需要跨域的API地址
2、changeOrigin：主要解决跨域，是一个布尔值，设置为true，本地会虚拟一个服务器，接受你的请求并带你发送该请求
3、secure：默认情况下如果请求的服务是https的，并且证书是未认证的的，则该错未认证证书默认是无法使用的。如果想要使用该证书。则需要进行如下配置，关闭安全检测
4、bypass：有时，不希望代理所有请求，可以像bypass属性传递一个function来实现该需求。
在function中，可以获取到request，response以及proxy options。
参考文档： https://github.com/webpack/docs/wiki/webpack-dev-server#bypass-the-proxy