使用content-type:chunked传输数据时客户端未分块接收问题求助

问题背景 #

我在使用Transfer-Encoding: chunked传输数据，每个数据块用\r\n分隔，但客户端接收时并未按预期分块，而是一次性拿到所有数据。已确认服务器的分块头格式正确，客户端实现支持分块传输，网络无明显异常，但怀疑可能存在防火墙或代理干扰，需要排查问题原因及解决办法。

客户端读取代码：

fetch('https://xxxxxxxxxxxxx')
    .then((response) => {
      const stream = response.body.getReader();

      return new ReadableStream({
        async pull(controller) {
          try {
            const { done, value } = await stream.read();
            if (done) {
              controller.close();
            } else {
              controller.enqueue(value);
            }
          } catch (error) {
            controller.error(error);
          }
        },
      });
    })
    .then(async (stream) => {
      const reader = stream.getReader();
      while (true) {
        const { done, value } = await reader.read();
        if (done) {
          break;
        }
      }
    })
    .catch((error) => console.error(error));

服务器返回数据示例：

{"x":1}\r\n{"x":1}\r\n{"x":1}\r\n{"x":1}\r\n

可能原因 #

• 中间代理/防火墙缓冲：多数反向代理、CDN或防火墙会开启响应缓冲，将多个Chunked小块合并为大响应体后转发，以此优化传输效率，直接破坏分块传输的预期行为。
• 服务器隐性缓冲：部分服务器框架默认开启输出缓冲，即便手动分块写入，框架也会缓存数据到一定大小才真正发送。比如Nginx的proxy_buffering、Apache的压缩模块，或者应用层框架的输出缓存机制。
• 客户端读取逻辑局限：浏览器fetch API的流读取在网络速度较快时，可能自动合并多个分块为一个value返回。同时当前代码仅读取流数据，未按\r\n分隔符拆分独立块，无法识别分块边界。

解决办法 #

1. 排查中间节点缓冲 #

• 若使用CDN，临时关闭动态内容缓冲功能，测试是否恢复分块传输。
• 调整服务器代理配置：Nginx添加proxy_buffering off;，Apache设置SetEnv no-gzip 1（若开启压缩），确保代理不缓冲Chunked响应。
• 直接连接服务器IP测试，绕过可能的防火墙，验证是否为中间节点导致的合并。

2. 服务器端禁用输出缓冲 #

• 根据使用的服务器框架关闭输出缓冲：Node.js中每次res.write()后调用res.flush()强制发送；Java Servlet中调用response.flushBuffer()；Python Flask中设置app.config['SEND_FILE_MAX_AGE_DEFAULT'] = 0并禁用响应压缩。
• 关闭服务器端的内容压缩（如gzip），压缩功能通常会缓冲整个响应体后再处理，破坏分块特性。

3. 客户端调整分块解析逻辑 #

需要维护缓冲区，按\r\n分隔符拆分完整块，示例代码如下：

fetch('https://xxxxxxxxxxxxx')
  .then(async (response) => {
    const reader = response.body.getReader();
    const decoder = new TextDecoder();
    let buffer = '';

    while (true) {
      const { done, value } = await reader.read();
      if (done) {
        // 处理最后剩余的不完整块
        if (buffer) {
          console.log('最终块:', buffer);
        }
        break;
      }
      // 解码二进制数据并追加到缓冲区
      buffer += decoder.decode(value, { stream: true });
      // 按分隔符拆分
      const chunks = buffer.split('\r\n');
      // 保留最后一个可能不完整的块
      buffer = chunks.pop();
      // 处理所有完整块
      chunks.forEach(chunk => {
        if (chunk) {
          console.log('收到分块:', chunk);
          // 此处添加业务逻辑处理单块数据
        }
      });
    }
  })
  .catch((error) => console.error(error));

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