webpack proxy的代理、抓包、跨域、重写代理路径、改头信息、webSocket（前后端分离必备）

自从前后端分离以后，代理与抓包对前端日益愈发重要，开发环境将请求代理到测试环境，生产环境，下面是我在对DevServer.proxy配置时整理的配置项与栗子。
基本功能：代理、抓包、跨域、重写代理路径、修改头信息、webSocket代理、

dev-server使用功能强大的http-proxy-middleware软件包。查看其文档以获取更高级的用法。

配置文件

找到文件/config/index.js

在proxyTable选项增加下面的配置，可配置多个不同的代理

    proxyTable: {
      '/dev': {
        target: 'http://www.baidu.com:80',
        changeOrigin: true, //true为开启跨域代理
        pathRewrite: {
          '^/dev': ''
        }
      }
    },

好了关键来了，敲黑板！比如一个接口http://localhost:8080/dev/getuser参数名 /dev是从端口后开始匹配的，配置 /dev/get 也能匹配到这个接口，而target如果配置 http://www.baidu.com:80/test/ 最后将代理至http://localhost:8080/test/dev/getuser

option

target

要与url模块解析的url字符串

forward

要用url模块解析的url字符串

agent

要传递到http（s）的对象.request（请参阅节点的https代理和http代理对象）

ssl

要传递给https.createServer（）的对象

ws

true/ false：如果要代理websockets

xfwd

true / false，添加x-forward标头

secure

true / false，如果要验证SSL Certs

toProxy

true / false，将绝对URL传递给path（用于代理代理）

prependPath

true / false，默认值：true - 指定是否要将目标路径添加到代理路径

ignorePath

true / false，默认值：false - 指定是否要忽略传入请求的代理路径（注意：如果需要，您将必须附加/手动）。

localAddress

绑定传出连接的本地接口字符串

changeOrigin

true / false，默认值：false - 将主机头的起始位置更改为目标URL

auth

基本认证，即’user：password’来计算授权头。

hostRewrite

重写（301/302/307/308）重定向上的位置主机名。

autoRewrite

根据请求的主机/端口重写（301/302/307/308）重定向的位置主机/端口。默认值：false。

protocolRewrite

将（301/302/307/308）上的位置协议重写为“http”或“https”。默认值：null。

headers

对象，添加请求头。（实施例：{host:‘www.example.org’}）

proxyTimeout

当代理没有从目标接收到响应时，超时（以毫秒为单位）这里是它的官方链接：https://github.com/chimurai/http-proxy-middleware

context

如果要将多个特定路径代理到同一目标，则可以使用具有context属性的一个或多个对象的数组：

proxy: [{
	context: ['/auth', '/api'],
	target: 'http://localhost:3000',
}]

请注意，默认情况下不会代理对root的请求。要启用根代理，devServer.index应将该选项指定为假值：
webpack.config.js

devServer: {
	index: '', // specify to enable root proxying
	host: '...',
	contentBase: '...',
	proxy: {
		context: () => true,
		target: 'http://localhost:1234'
	}
}

bypass

有时你不想代理一切。可以基于函数的返回值绕过代理。
在该功能中，您可以访问请求，响应和代理选项。它必须返回一个false或将要提供的路径，而不是继续代理请求。
例如，对于浏览器请求，您希望提供HTML页面，但对于要求代理的API请求。你可以这样做：

proxy: {
  '/api': {
    target: 'http://localhost:3000',
    bypass: function(req, res, proxyOptions) {
      if (req.headers.accept.indexOf('html') !== -1) {
        console.log('Skipping proxy for browser request.');
        return '/index.html';
      }
    }
  }
}

onProxyRes

请求发送前进行抓包与修改头信息，其他操作自行发挥想象

onProxyRes: function(proxyRes, req, res) {
  var cookies = proxyRes.headers['set-cookie'];
  var cookieRegex = /Path=\/car-oss\//i;
  //修改cookie Path
  if (cookies) {
    var newCookie = cookies.map(function(cookie) {
      if (cookieRegex.test(cookie)) {
        return cookie.replace(cookieRegex, 'Path=/');
      }
      return cookie;
    });
    //修改cookie path
    delete proxyRes.headers['set-cookie'];
    proxyRes.headers['set-cookie'] = newCookie;
  }
}

cookieDomainRewrite

重写set-cookie标题的域。可能的值：false（默认）：禁用cookie重写String：
例如，新cookieDomainRewrite: “new.domain”。要删除域，请使用cookieDomainRewrite: “”。
对象：将域映射到新域，用于"*"匹配所有域。例如，保持一个域不变，重写一个域并删除其他域：

cookieDomainRewrite: {
	"unchanged.domain": "unchanged.domain",
	"old.domain": "new.domain",
	"*": ""
}

个人其他配置

因为我的接口前缀不统一，所以利用process.env.NODE_ENV给axios的config.js配置了开发模式下为所有请求增加一级前缀
例如：
localhost:8080/test/get
localhost:8080/user/get
配置后：
localhost:8080/dev/test/get
localhost:8080/dev/user/get

baseURL: process.env.NODE_ENV === 'development' ? window.location.href.split('/#/')[0] + '/dev' : window.location.href.split('/#/')[0]

这样就方便我管理所有接口在开发模式下代理了