sub_filter实现CDN灰度切换需禁用gzip、显式配置sub_filter_types包含JS/CSS/JSON、关闭sub_filter_once、处理引号空格边界，并确保后端不chunked、MIME准确。
sub_filter 能实现 CDN 域名的灰度切换，但必须绕过 gzip、chunked 编码和 MIME 类型限制，否则替换直接失效。
sub_filter 替换 CDN 域名前必须禁用 gzip
Nginx 默认在启用 gzip on 时，对后端返回的响应不做解压，直接透传压缩流——而 sub_filter 只能处理明文响应体。一旦响应被 gzip 压缩，sub_filter 就完全不生效。
- 正确做法是在对应
location块中显式关闭压缩：gzip off; - 或者更稳妥地，用
proxy_set_header Accept-Encoding "";告诉后端“我不接受压缩”，让后端返回原始内容 - 若后端强制返回 gzip（如某些 SaaS 接口），只能加一层本地反代：第一层关 gzip 获取明文，第二层用
sub_filter处理后再转发
sub_filter_types 必须显式包含 JS/CSS/JSON
sub_filter 默认只作用于 text/html，而 CDN 域名常出现在 application/javascript、text/css、application/json 等响应中，不声明就等于没配。
- 务必添加：
sub_filter_types text/html application/javascript text/css application/json; - 避免偷懒写
sub_filter_types *;—— 某些旧版 Nginx 不支持通配符，且会匹配到二进制类型导致异常 - 确认后端响应头中
Content-Type确实是上述值；若为application/octet-stream或未设置，则sub_filter自动跳过
sub_filter_once off 是灰度切换的关键开关
灰度场景下，一个 HTML 页面里可能有多个静态资源引用（src="/js/app.js"、href="/css/main.css"、data-cdn="https://cdn-a.example.com"），只替换第一个毫无意义。
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
- 必须设为：
sub_filter_once off; - 注意：开启后所有匹配位置都会替换，若原始内容含类似子串（如把
https://cdn-a.example.com替成https://cdn-b.example.com，但页面里还有https://cdn-a.example.com/api），后者也会被误改——需确保替换字符串足够唯一 - 大小写敏感默认开启，若前端输出不规范（如
Src=、src =），建议补一条：sub_filter_ignore_case on;
路径边界与空格兼容性容易导致替换漏掉
sub_filter 是纯字面量流式匹配，不解析 HTML 结构。常见漏替原因不是配置错，而是 HTML 属性值格式不统一。
- 例如想替换
src="/static/，但实际代码是src = "/static/（等号后有空格）或src='/static/（单引号），就得额外加规则：sub_filter "src=\"/static/" "src=\"https://cdn-b.example.com/static/";和sub_filter "src='/static/" "src='https://cdn-b.example.com/static/"; - CDN 域名替换推荐用完整协议+域名形式（如
https://cdn-a.example.com→https://cdn-b.example.com），比只换路径前缀更可靠，也避开引号/空格干扰 - 若发现部分资源没切过去，用
curl -H "Accept: text/html" -s http://your-domain/ | grep cdn直接看原始响应，确认是否真没匹配上
真正难的不是写几行 sub_filter，而是确保整个响应链路：后端不 chunked、不强制 gzip、MIME 准确、HTML 格式收敛——任何一环松动，灰度就会在某个资源上静默失败。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
