Brotli压缩小HTTP响应体失效：浏览器接收后挂起问题求助

Brotli压缩小数据本身没有问题，你的浏览器挂起是因为HTTP响应的构造存在疏漏，和数据大小无关。

核心问题点 #

• 缺少Content-Encoding响应头：浏览器收到数据后，不知道这是Brotli压缩的内容，会尝试以原始文本格式解析，自然无法正确处理，导致一直处于加载状态。
• 分块传输的处理错误：原始响应使用了Transfer-Encoding: chunked，但压缩后你可能没有重新处理分块结构——压缩后的二进制数据不能直接套用原来的分块标记，要么重新计算分块发送，要么改用Content-Length头（因为压缩后数据长度是已知的）。

具体修复步骤 #

1. 添加必要的响应头
   必须在响应中添加Content-Encoding: br，告诉浏览器数据是Brotli压缩的。同时，因为内容已经压缩，不需要再保留Transfer-Encoding: chunked（除非你明确要分块发送压缩后的数据），改用Content-Length更稳妥。

   修改后的响应头应该类似：

   HTTP/1.1 200 OK
   Content-Type: application/json; charset=utf-8
   Vary: Accept-Encoding
   Date: Thu, 30 Mar 2023 15:50:03 GMT
   Connection: close
   Content-Encoding: br
   Content-Length: [压缩后数据的字节长度]
   

2. 调整Node.js代码的响应发送逻辑
   确保在发送压缩后的body时，同步设置好响应头。示例代码如下：

   import zlib from 'node:zlib';
   import express from 'express';
   const app = express();
   
   app.get('/api', async (req, res) => {
     const body = '[]';
     try {
       const compressedBody = await new Promise<Buffer>((resolve, reject) => {
         // 针对文本类数据，设置TEXT模式可优化压缩效果
         zlib.brotliCompress(body, { mode: zlib.constants.BROTLI_MODE_TEXT }, (err, data) => {
           if (err) reject(err);
           else resolve(data);
         });
       });
       // 设置响应头
       res.set({
         'Content-Type': 'application/json; charset=utf-8',
         'Vary': 'Accept-Encoding',
         'Content-Encoding': 'br',
         'Content-Length': compressedBody.length
       });
       // 发送压缩后的数据
       res.send(compressedBody);
     } catch (err) {
       process.stderr.write('Error while brotli compressing');
       res.status(500).send('Server Error');
     }
   });
   

3. 如果坚持使用分块传输
   若必须保留Transfer-Encoding: chunked，则无需手动处理分块标记——Node.js的res对象默认支持分块传输，只要不设置Content-Length，直接发送压缩后的Buffer即可，它会自动完成分块编码。

验证 #

压缩后的[]数据虽然极小，但只要响应头配置正确，浏览器就能正常解码并结束请求，不会出现挂起状态。

内容的提问来源于stack exchange，提问作者Kevin L Xu