vite + nginx运行前端资源提示ERR_CONTENT_DECODING_FAILED 200 (OK)

Posted on Views:

1.chrome console异常日志

GET http://x:6601/assets/index-B9lsUMCZ.js net::ERR_CONTENT_DECODING_FAILED 200 (OK)
index.html:9

GET http://x:6601/assets/_plugin-vue_export-helper-BEfAEIvr.js net::ERR_CONTENT_DECODING_FAILED 200 (OK)
index.html:10

GET http://x:6601/assets/useApi-CUgTH_jn-Ddzyv1EW.js net::ERR_CONTENT_DECODING_FAILED 200 (OK)
index.html:11

GET http://x:6601/assets/router-C6CUu5gF.js net::ERR_CONTENT_DECODING_FAILED 200 (OK)

1.1分析

这个报错的关键不是 200 OK，而是：net::ERR_CONTENT_DECODING_FAILED这通常表示 HTTP 响应头声明了压缩，但实际返回的数据无法按声明的方式解压。

你这里是多个 .js 文件同时出现：

1
2
3
4
index-B9lsUMCZ.js
_plugin-vue_export-helper-BEfAEIvr.js
useApi-CUgTH_jn-Ddzyv1EW.js
router-C6CUu5gF.js

所以大概率不是某一个 JS 文件损坏，而是 6601 端口前面的 Web 服务/Gzip 配置有问题。

1.2检测nginx配置

...
  location ~* \.js$ {
        # 检查是否存在对应的 .js.gz 文件
        try_files $uri.gz $uri =404;
        # 添加 gzip 头部
        add_header Content-Encoding gzip;
        # 设置缓存头
        add_header Cache-Control "public, max-age=31536000";
        # 设置 MIME 类型为 JavaScript
        default_type application/javascript;
 }
...

# 发现自定义加js头部压缩标签，实际下载js是未压缩的
add_header Content-Encoding gzip;

1.3下载js查看是否压缩(gzip)

在服务器或本机执行：

1
2
3
4
wget  http://x:6601/assets/index-B9lsUMCZ.js
file index-B9lsUMCZ.js
	gzip compressed data  ## 压缩
	file xx               ## 未压缩

浏览器会认为服务器返回的是 gzip 数据，但如果服务器实际上返回的是未压缩的 JS，就会直接导致：

1
ERR_CONTENT_DECODING_FAILED

1.4解决

...
        # 添加 gzip 头部（关闭js压缩添加header）
        # add_header Content-Encoding gzip;
....

1.5重启前端服务测试

  • pass