要让Nginx将本地静态资源请求无缝导向CDN，核心是服务端反向代理透传+路径映射，而非客户端重定向；前端构建需先将资源URL替换为CDN域名，Nginx仅作为可控源站回源或兜底代理，并严格配置缓存头、白名单与安全响应头。
要让 Nginx 把原本访问本地静态资源的请求，自动、无缝地重写到新 CDN 域名下（比如 https://static.example.com），核心不是“重写 URL 返回给浏览器”，而是**在服务端做反向代理透传 + 资源路径映射**，同时前端构建时已将资源引用替换为 CDN 地址。真正需要 Nginx 干的，是保障回源可控、缓存策略合理、且旧路径仍能兜底或平滑过渡。
明确前提：离线打包后资源已上传至 CDN
Vue/React 等项目执行 npm run build 后生成的 dist 目录，应已通过脚本或 CI/CD 上传至 CDN 的对应路径（如 https://static.example.com/static/js/app.abc123.js）。此时前端代码中所有 public/ 或 assets/ 引用都已是 CDN 地址，Nginx 不再直接提供这些文件——它只负责两件事：一是作为源站被 CDN 回源拉取（可选）；二是对未走 CDN 的请求做兼容或降级处理。
方案一：Nginx 作为 CDN 源站（推荐，最常用）
这是生产环境主流做法。Nginx 不暴露静态文件路径，只响应 CDN 的回源请求，且严格控制缓存头：
- 配置独立的源站域名（如
origin.example.com），仅允许 CDN IP 白名单访问（防止直接穿透） - 在 server 块中关闭所有 public 路径的直接访问，只开放 CDN 回源路径（如
/static/） - 设置强缓存头：
Cache-Control: public, immutable, max-age=31536000，配合expires 1y - 确保
location /static/指向真实静态目录，且不启用alias导致路径拼接错误（推荐用root+ 完整路径匹配）
方案二：Nginx 做 302 临时跳转（仅用于灰度或调试）
若需快速验证 CDN 是否生效，可对特定资源路径做临时重定向（不建议长期使用，影响 SEO 和缓存）：
location ^~ /static/ { return 302 https://static.example.com$request_uri; }- 注意：
$request_uri保留原始查询参数，避免丢失版本号或 hash - 上线前务必移除，否则浏览器和中间节点会缓存跳转，导致无法回退
方案三：Nginx 代理转发（适合 CDN 未覆盖或回源失败时兜底）
当 CDN 节点未命中或返回 404，可由 Nginx 尝试从本地读取并返回（增强可用性）：
- 启用
proxy_cache，设置proxy_cache_use_stale error timeout http_500 - 配置
location /static/先 proxy_pass 到 CDN，失败则 fallback 到本地 root - 需配合
proxy_intercept_errors on和error_page 404 = @local_fallback
关键细节不能漏
无论哪种方式，都要同步检查：
- 前端构建时设置
publicPath: "https://static.example.com/"（Vue CLI）或assetPrefix（Vite），确保 HTML 中 script/style 标签地址正确 - CDN 控制台必须配置「强制 HTTPS 回源」和「忽略查询参数缓存」（避免 ?v=1.0.0 导致缓存分裂）
- Nginx 配置中禁用
autoindex on，关闭目录浏览；添加X-Content-Type-Options: nosniff防 MIME 类型混淆 - 首次上线后，用
curl -I检查 CDN 返回头是否含CF-Cache-Status（Cloudflare）或X-Cache（阿里云），确认命中边缘节点
