如何在浏览器中用JavaScript的DecompressionStream解压gzip文件？

错误原因拆解 #

1. Chrome的Failed to fetch：基本是文件路径错误或本地服务器未正确托管.gz文件，导致请求404。
2. Firefox/Safari的解压失败：主要有两个诱因：
   • 服务器给.gz文件设置了Content-Encoding: gzip响应头，浏览器会自动解压内容，此时你拿到的Blob已经是明文，再用DecompressionStream处理就会因输入格式不匹配报错。
   • MacOS默认gzip命令生成的文件包含原始文件名、时间戳等归档元数据，而DecompressionStream的gzip模式更适配纯压缩数据流（比如HTTP传输的gzip编码内容）。

针对性解决方案 #

1. 修复服务器响应头（避免自动解压）

如果服务器给.gz文件设置了Content-Encoding: gzip，改为Content-Type: application/gzip，让浏览器返回原始二进制数据。
以Vite为例，在vite.config.js中添加配置：

export default {
  server: {
    headers: {
      'Content-Type': 'application/gzip',
    },
  },
};

2. 生成纯压缩格式的gzip文件

使用gzip -n参数生成不含元数据的压缩文件：

gzip -n hello.txt

生成的hello.txt.gz可直接被DecompressionStream解析。

3. 优化解压函数（直接处理响应流）

跳过Blob转换步骤，直接使用响应的body流处理，提升效率：

const decompress = async (url) => {
  const ds = new DecompressionStream('gzip');
  const response = await fetch(url);
  const stream = response.body.pipeThrough(ds);
  return new Response(stream).text();
};

4. 验证文件路径

确保/hello.txt.gz能被服务器正确访问，比如在Vite项目中把文件放在public目录下，避免路径错误导致的fetch失败。

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