Nginx sub_filter可实现无侵入式CDN灰度切换：需禁用压缩、扩展sub_filter_types支持JS/CSS/JSON、关闭sub_filter_once；通过map变量或location隔离动态替换域名，注意路径边界与空格兼容性。
用 Nginx sub_filter 替换前端资源的 CDN 域名，是实现多节点灰度切换的一种轻量、无侵入方式。它不依赖前端构建或后端逻辑改造，只需在网关层动态改写 HTML、JS、CSS 中的静态资源路径即可。
核心配置要点
要让替换生效并支持灰度切换，需满足三个前提：
-
响应必须未压缩：Nginx 默认对已 gzip/brotli 压缩的内容不执行 sub_filter。需在 location 中显式禁用压缩：
proxy_set_header Accept-Encoding "";，并确保后端不强制返回压缩内容 -
Content-Type 必须匹配：默认只处理
text/html，CDN 路径常出现在 JS/CSS/JSON 中，必须补充类型：sub_filter_types text/html application/javascript text/css application/json; -
替换需覆盖所有出现位置：设
sub_filter_once off;，否则只替换第一个匹配项（如页面含多个src="/js/app.js"，仅首处生效）
灰度切换的实现方式
可通过变量控制 CDN 域名，实现按请求特征（如 Header、Cookie、IP 段）动态切换：
- 定义映射变量，例如用 Cookie 标识灰度用户：
map $cookie_gray_mode $cdn_host { "v2" "https://cdn-v2.example.com"; default "https://cdn-v1.example.com"; } - 在 location 中引用变量：
sub_filter '/static/' "$cdn_host/static/";（注意引号与变量语法，需启用nginx -V确认支持变量插值；若不支持，改用多段 if + set 模拟） - 更稳妥的做法是分 location 或 server 块做路由，例如
location /gray/下统一使用 v2 CDN，再配合 rewrite 或 proxy_pass 隔离流量
典型替换写法与避坑提示
常见 CDN 路径替换示例（注意边界与大小写）：
立即学习“前端免费学习笔记（深入）”；
- 替换相对路径：
sub_filter 'src="/js/' 'src="https://cdn.example.com/js/';（注意末尾斜杠对齐，避免误替/js/main.js中的/js/） - 替换带协议绝对路径：
sub_filter 'https://old-cdn.com/' 'https://cdn-v1.example.com/'; - 规避空格干扰：HTML 属性值可能含空格，如
href = "/css/style.css"，建议同时配置：sub_filter 'href="/css/' 'href="https://cdn.example.com/css/';和sub_filter 'href = "/css/' 'href = "https://cdn.example.com/css/'; - 不支持正则，无法提取文件名做动态拼接（如把
/img/abc.png改成https://cdn/abc.png），复杂场景需改用subs_filter模块或 Lua
验证与调试关键步骤
替换失败时，按顺序排查：
- 用
curl -H "Accept-Encoding: identity" -I http://your-domain/查看响应头，确认Content-Type正确、无Content-Encoding: gzip、有Content-Length（非 chunked） - 用
curl -H "Accept-Encoding: identity" http://your-domain/index.html | grep -o "https://cdn.*\.js"直接检查响应体是否已替换 - 浏览器开发者工具中禁用缓存，查看 Network → Response 标签页原始内容，而非 Preview
- 若仍不生效，临时加
add_header X-Sub-Filter-Status "active";到 location，确认配置被加载
