带有 Cookie 的 Webpack devServer 转发答案

【问题标题】：Webpack devServer forward with Cookies带有 Cookie 的 Webpack devServer 转发
【发布时间】：2020-08-27 19:49:33
【问题描述】：

我正在使用 Webpack devServer before 拦截请求，然后使用 node-fetch 从远程检索 html 文件。如何使用这种方法保存 Cookie？

before: function (app, server, compiler) {
    app.get('/*', function (req, res, next) {
        fetch(`https://example.com`)
          .then(res => res.text())
          .then(body => {
            res.send(body)
          });
    });
},

【问题讨论】：

标签： webpack proxy webpack-dev-server node-fetch

【解决方案1】：

Apache Superset 有一个使用http-proxy 拦截 HTML 并应用额外修改的非常好的示例：https://github.com/apache/incubator-superset/blob/c715cad48ea16bb616c9db174e30ea3f5af39fc7/superset-frontend/webpack.proxy-config.js#L137-L153

您不必使用fetch API，只需在onProxyRes 事件中重复使用proxyResponse。

要保留响应 cookie，您需要解析 set-cookie 标头，例如 this：


/**
 * Parse the `Set-Cookie` header from remote servers.
 */
function parseSetCookie(
  cookieHeaders?: string | number | string[],
): [string[], Cookies] {
  if (!cookieHeaders) return [[], {}];
  const cookieArray = Array.isArray(cookieHeaders)
    ? cookieHeaders
    : [String(cookieHeaders)];
  const cookies: Cookies = {};
  return [
    cookieArray,
    cookieArray
      .map((x) => x.split(';', 1)[0].split('=', 2))
      .reduce((acc, [key, value]) => {
        acc[key] = value;
        return acc;
      }, cookies),
  ];
}

parseSetCookie(res.getHeader('set-cookie'));

【讨论】：