这个错误我之前调试时也碰到过，核心原因是客户端收到的内容和你声明的Content-Encoding不匹配，或者中间件的执行逻辑、配置有漏洞。咱们一步步来排查解决：

1. 先检查中间件的执行顺序 #

你的gzip处理中间件必须放在express.static之前！如果静态资源中间件先执行，它会直接返回原JS文件，后续你修改req.url的操作就完全无效了。正确的顺序应该是：

// 先处理gzip逻辑
app.get('*.js', function (req, res, next) {
  // 关键：先判断客户端是否支持gzip压缩
  if (req.headers['accept-encoding']?.includes('gzip')) {
    req.url += '.gz';
    res.set('Content-Encoding', 'gzip');
    res.set('Content-Type', 'text/javascript');
    // 加上Vary头，告诉缓存服务器根据Accept-Encoding缓存不同版本
    res.set('Vary', 'Accept-Encoding');
  }
  next();
});

// 再挂载静态资源中间件（假设你的打包文件在dist目录）
app.use(express.static('dist'));

2. 验证Webpack生成的gzip文件是否有效 #

有时候错误是因为Webpack没生成正确的gzip文件。你可以：

• 找到打包后的.js.gz文件，用命令行执行gzip -d your-file.js.gz
• 如果能正常解压出原JS文件，说明文件没问题；如果解压报错，检查你的Webpack压缩插件配置

比如用compression-webpack-plugin的话，确保配置正确：

const CompressionPlugin = require('compression-webpack-plugin');

module.exports = {
  // ...其他Webpack配置
  plugins: [
    new CompressionPlugin({
      algorithm: 'gzip',
      test: /\.(js|css|html)$/, // 要压缩的文件类型
      threshold: 8192, // 文件大小超过8KB才压缩
      minRatio: 0.8 // 压缩率小于0.8才保留压缩文件（避免无效压缩）
    })
  ]
};

3. 避免强制返回gzip（检查请求头） #

你原来的代码没有判断客户端是否支持gzip，如果客户端发送的请求头里没有Accept-Encoding: gzip，你硬返回gzip内容，客户端就会因为无法解码而报错。这就是为什么要加上req.headers['accept-encoding']?.includes('gzip')的判断。

4. 考虑用成熟的第三方中间件简化处理 #

自己写中间件容易忽略边缘情况，比如不同文件类型的Content-Type设置、缓存策略等。可以试试express-static-gzip，它会自动处理所有gzip相关逻辑：

const expressStaticGzip = require('express-static-gzip');
app.use('/', expressStaticGzip('dist', {
  orderPreference: ['gzip'],
  enableBrotli: false // 如果不需要Brotli压缩可以关闭
}));

最后，测试前记得清除浏览器缓存，避免旧的缓存内容干扰结果。

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