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