能否在Webpack Proxy内部修改API返回的JSON响应结构？

你遇到的问题其实很常见——Webpack Dev Server的proxy默认不会帮你解析响应体，不过我们可以借助它底层依赖的http-proxy-middleware提供的钩子来手动处理响应，完全不需要在应用代码里做冗余处理。

下面是具体的实现步骤和代码示例：

核心思路 #

Webpack Dev Server的proxy配置支持onProxyRes钩子，这个钩子可以让你拦截代理返回的响应。默认情况下响应是以流的形式传输的，所以我们需要先收集流中的数据，解析成JSON后按需简化，再重新构造响应返回给客户端。

具体配置示例 #

首先，如果你觉得手动处理流比较麻烦，可以先安装concat-stream这个工具包来简化数据收集：

npm install concat-stream --save-dev

然后在你的webpack.config.js中修改proxy配置：

const { createProxyMiddleware } = require('http-proxy-middleware');
const concat = require('concat-stream');
const zlib = require('zlib'); // 处理压缩响应时需要

module.exports = {
  // ...其他Webpack配置项
  devServer: {
    proxy: {
      '/api': {
        target: 'https://你的API地址.com',
        changeOrigin: true,
        onProxyRes: (proxyRes, req, res) => {
          // 处理可能的压缩响应（gzip/deflate）
          let responseStream = proxyRes;
          const contentEncoding = proxyRes.headers['content-encoding'];
          
          if (contentEncoding === 'gzip') {
            responseStream = proxyRes.pipe(zlib.createGunzip());
          } else if (contentEncoding === 'deflate') {
            responseStream = proxyRes.pipe(zlib.createInflate());
          }

          // 收集响应数据并处理
          responseStream.pipe(concat((rawData) => {
            try {
              // 解析原始JSON数据
              const originalData = JSON.parse(rawData.toString());
              // 按需简化数据，这里只保留customerName字段
              const simplifiedData = {
                customerName: originalData.customerName
                // 可以添加其他需要的字段
              };

              // 构造新的响应体
              const newResponseBody = JSON.stringify(simplifiedData);
              // 更新响应头，确保客户端能正确解析
              res.setHeader('Content-Length', Buffer.byteLength(newResponseBody));
              res.setHeader('Content-Type', 'application/json');
              // 如果之前有压缩，这里可以重新压缩返回（可选）
              // res.setHeader('Content-Encoding', 'gzip');
              // zlib.gzip(newResponseBody, (err, compressedData) => res.end(compressedData));
              res.end(newResponseBody);
            } catch (error) {
              // 处理解析失败的情况，比如API返回非JSON数据，直接返回原始响应
              console.error('解析API响应失败:', error);
              res.end(rawData);
            }
          }));

          // 暂停原始响应流，避免自动发送未处理的数据
          proxyRes.pause();
          // 移除原始的Content-Length头，因为我们修改了响应体
          delete proxyRes.headers['content-length'];
          // 如果处理了压缩，也要移除对应的Content-Encoding头
          if (contentEncoding) {
            delete proxyRes.headers['content-encoding'];
          }
        }
      }
    }
  }
};

关键注意事项 #

• 处理压缩响应：如果你的API返回的是gzip或deflate压缩的数据，一定要先解压再处理，否则解析JSON会失败。处理完成后也可以选择重新压缩返回，优化传输效率。
• 异常处理：一定要加上JSON解析的异常捕获，避免因为API返回非预期格式的数据导致代理崩溃。
• 响应头更新：修改响应体后必须更新Content-Length头，否则客户端会因为数据长度不匹配而出现解析错误。
• 流的控制：调用proxyRes.pause()可以暂停原始响应流，防止未处理的数据直接发送给客户端。

这样配置后，你的应用收到的就是已经简化后的响应数据了，完全不需要在应用代码里再做过滤处理，保持代码的简洁性。

内容的提问来源于stack exchange，提问作者Buh Buh