前端乱码常由Gzip与Brotli双压缩导致，表现为JS/CSS空白、JSON解析失败等；需检查Response Headers中Content-Encoding是否重复（如br,gzip），并统一禁用Brotli、完善Gzip配置（含mime类型、等级4–6、gzip_vary on）及客户端兼容处理。
前端乱码常不是编码问题，而是压缩层叠或解压缺失造成的。Gzip 与 Brotli 同时启用、未协调好客户端/服务端/CDN 三方行为，极易引发 CSS/JS 加载为空白、JSON 解析失败、字体异常等表现。
确认是否为双压缩导致的乱码
打开浏览器 DevTools → Network → 找一个出问题的 JS/CSS 文件 → 查看 Response Headers：
- 若同时存在 Content-Encoding: br, gzip 或 br,gzip（逗号分隔），说明被重复压缩，浏览器无法识别多级编码
- 若只有 Content-Encoding: br，但前端代码没处理 Brotli（如 requests 默认不支持），就会把二进制当文本渲染，显示乱码或空内容
- 若响应头有 Vary: Accept-Encoding 但缺失，可能 CDN 缓存了不同压缩版本，返回错配内容
统一压缩策略：禁用 Brotli 或降级为 Gzip
多数场景下，保留 Gzip + 禁用 Brotli 更稳妥，尤其当后端或 CDN 不完全可控时：
- Nginx 配置中显式关闭 Brotli：brotli off;（即使模块已编译，该指令可彻底禁用）
- 宝塔面板用户：进入「网站」→「配置文件」→ 删除或注释掉 brotli on; 及相关 brotli_* 行
- Cloudflare 用户：关闭「Speed」→ 「Auto Minify」中的 Brotli 选项；或在「Rules」中加 Page Rule，设置 Disable Brotli
确保 Gzip 配置完整且安全
仅开启 gzip on 不够，关键类型遗漏或压缩过深会直接导致资源损坏：
- 必须显式声明 MIME 类型：在 gzip_types 中包含 text/css application/javascript application/json image/svg+xml，不能依赖默认值
- 压缩等级设为 4–6：避免设为 9，高并发下 zlib 可能截断 JS/CSS 流末尾字节，造成语法错误
- 务必开启 gzip_vary on;：让 CDN 和代理知道按 Accept-Encoding 区分缓存，防止 gzip 内容被错发给不支持的客户端
客户端侧兼容处理（爬虫/脚本/调试）
当无法控制服务端时，需在请求端主动适配：
- Python requests：发送请求前设置 headers={'Accept-Encoding': 'gzip, deflate'}，明确排除 br
- 若必须接收 Brotli，安装并手动解压：pip install brotli，再用 brotli.decompress(response.content) 获取原始 bytes
- cURL 调试时加 -H "Accept-Encoding: gzip"，避免触发 Brotli；抓包看到 br 编码可用 brotli -d 命令行解压验证
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
