开发网售系统时使用 webpack-dev-server 的 proxy 遇到的问题

1、问题：

由于后端 cookie 改造，导致本地开发环境使用 webpack-dev-server 的 proxy 代理请求失败；

检查发现登录接口返回的响应头中 set-cookie 设置了 domain，由于项目在本地跑的时候是 localhost，和接口的域名不一致，就导致了浏览器无法保存 cookie，请求失败。

2、解决：

webpack-dev-server 的 proxy 里面有一个 onProxyRes 函数（可以在代理收到请求之后将数据发给浏览器之前做一层拦截），在这里使用正则匹配，把 set-cookie 返回的 domain 修改为 localhost。

// 将 domain 设置为 localhost

cookie.replace(/domain=\.?vistacloud.cn/i, 'domain=localhost');

这样浏览器就可以把 cookie 保存下来，同时在请求的时候也把 cookie 发送出去。

3、总结：

前端问题有可能是后端改动导致的，所以定位到问题后及时与后端沟通。

proxy: [
        {
            context: ['/vep-manager', '/vep1'],
            target: 'http://sit.vep.vistacloud.cn/',
            changeOrigin: true,
            onProxyRes: function (proxyRes, req, res) {
                var cookies = proxyRes.headers['set-cookie'];
                // 返回的cookie中提取domain
                var cookieRegex = /domain=\.?vistacloud.cn/i;
                //修改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;
                }
            }
        },
    ],