webpack-dev-server使用proxy跨域cookie问题

如今前后端分离的的开发模式越来越成为主流，前后端分离的开发模式确实给开发带来了诸多便利， 但也带来了一些小问题，比如跨域的问题，因为前后端分开的开发模式，在开发过程中前端项目和后端项目运行在不同的源下，所以跨域问题成了前后端分离开发过程中的主要问题。

这几天，我在做一个前端小项目的时候也遇到了跨域问题，由于后台接口调用的是别人的接口，而该接口没有提供跨域访问，所以不得不使用webpack-dev-server的proxy进行跨域，开始的时候一切正常，用的舒服了，后来在访问一些需要登录的接口就有问题了，虽然我也调用它的接口做了登录功能，但是登录过后的cookie一直无法保存到本地。之后去查看了登录接口，发现其登录接口的返回的响应头中的set-cookie中设置了domain选项，由于项目在本地跑的时候是localhost，和接口的域名不一致，所以导致浏览器无法保存cookie。接着去查阅了webpack-dev-server的相关文档，终于找到了解决了办法。

在webpack-dev-server的每个代理请求中的配置项中有一个onProxyRes的配置项，该配置项是一个函数，可以在代理收到请求之后将数据发给浏览器之前做一层拦截，我们可以在这里修改set-cookie中domain为localhost，这样浏览器就可以把cookie保存下来，同时在请求的时候也把cookie发送出去
说了那么多屁话，该放点代码上去了

devServer: {
    port: 3000,
    contentBase: path.resolve(__dirname, "dist"),
    inline: true,
    disableHostCheck: true,
    proxy: {
      "/api": {
        target: "http://happymmall.com",
        changeOrigin: true, 
        pathRewrite: {'^/api' : '/'},
        onProxyRes: function(proxyRes, req, res) {
          var cookies = proxyRes.headers['set-cookie'];
          var cookieRegex = /Domain=\.?xxx.com/i; // 返回的cookie中提取domain
          //修改cookie Path
          if (cookies) {
            var newCookie = cookies.map(function(cookie) {
              if (cookieRegex.test(cookie)) {
              	// 将domain设置为localhost
                return cookie.replace(cookieRegex, 'Domain=localhost');
              }
              return cookie;
            });
            delete proxyRes.headers['set-cookie'];
            proxyRes.headers['set-cookie'] = newCookie;
          }
        }
      },
     
    }
  
  }