前后端联调解决cookie回写

3,192 阅读1分钟

故事背景
在日常开发中,当我们需要和后端联调时候,发送接口请求的时候,后端会校验接口是否带上了cookie,如果没有,后端会返回一个redirectUrl,这个redirectUrl是线上的一个登录地址, 因此普遍的做法是登陆一下线上的系统,复制一下cookie,写入本地webpackcookie,再次重启webpack

{
    /api/: {
        headers: {
           cookie: '刚才登录拿到的线上的cookie' 
        }
    }
}

产生的问题

  1. 当前调试的cookie如果失效,就需要重新登录,然后复制cookie,最后重启整个项目
  2. 每次提交代码时,都需要清空cookie 【因为cookie每次都不一样】
  3. 耗费了许多时间在这个复制cookie

原因分析

  1. 后端在进行接口调用的时候是每次都需要进行cookie校验
  2. cookie失效redirectUrl是写死的线上地址,不是根据refere判断的

方案调研

  1. cookie不做失效校验
  2. redirectUrl根据refere来判断
  3. 前端通过webpack代理实现cookie的自动回写

结果

  • cookieredirectUrl的这两个方案,对后端来说,改动量非常大,所以行不通
  • 使用webpack自动回写
let cookie = '';
...
{
    /api/: {
        // 这个代表你要自定义处理返回的数据
        selfHandleResponse: true,
        onProxyReq(proxyReq, req, res) {
            //每次请求之前设置一下 cookie
            proxyReq.setHeader('cookie', cookie);
        },
        onProxyRes(proxyRes, req, res) {
            if (proxyRes.headers['set-cookie']) {
              // 获取后端系统返回的 cookie
              cookie = proxyRes.headers['set-cookie'].join(';');
            }
            var body = [];
            proxyRes.on('data', function (chunk) {
                body.push(chunk);
            });
            proxyRes.on('end', function () {
                body = JSON.parse(Buffer.concat(body).toString());
                if (!body.success && body.code === 302) {
                  body.message.redirect = 'http://localhost:3000';
                }
                res.end(Buffer.from(JSON.stringify(body)));
            });
      }
    }
}
...

讨论
这种方案只是对于点对点的系统有效果

image.png 如果是下面这种系统这个方案将会是无效的

image.png

那么这种该怎么解决呢?