Webpack Proxy解决固定域名条件下开发环境跨域问题

最近在做Vue项目，因为需要用到微信的第三方登录，域名得固定，需要改了hosts之后发送跨域请求，起初运维大神使用了树莓派来搭建挂载了需要请求的服务资源的办公室本地的局域网服务器，但只能在办公室使用，在寝室无法办公，于是自己摸索了一下，才发现webpack本身就有跨域的设置功能。

例如我要请求www.xxxxx.com/api/tissue/xxx，需要修改Vue项目中的/config/index.js文件中的proxyTable如下

proxyTable: {
  "/api/tissue": {
    target: "https://www.xxxxx.com",
    secure: false,
    changeOrigin: true
  }
}

secure:代表是否检查SSL证书，安全选项，一般为false

changeOrigin的值为true时，本地会虚拟一个服务端接收你的请求并代你发送该请求

其中"/api/tissue"为需要代理的请求的地址公用前缀，当请求的地址为www.xxxxx.com/api/tissue开头时，其请求被代理到target属性值的地址里，这里我请求到www.xxxxx.com/api/tissue/xxx只用写/api/tissue/xxx就可以了

但是还存在一个问题，我改了本地的hosts，无法请求到到本来需要请求的地址，所以这个时候就得运维配合把服务的资源加一个dev.xxxxx.com域名了，然后修改target就好了，最后的配置如下

proxyTable: {
  "/api/tissue": {
    target: "https://dev.xxxxx.com",
    secure: false,
    changeOrigin: true
  }
}

如果想深入了解webpack proxy 的应用，可以l了解一下http-proxy-middleware，webpack-dev-server的实现方法其实就是对这个中间件的封装