CDN 配置避坑指南：关键要点与实战经验总结

💡 前言：

很多开发者在第一次接入 CDN 时，往往认为"只要添加个域名"就万事大吉了。

但实际上，回源策略 、缓存规则 、HTTPS证书 等配置细节，直接决定了你的网站是"飞起来"还是"挂掉"。

本文结合真实踩坑经验（如 HSTS 访问错误、Nginx 反代 404 等），总结了一份 CDN 配置清单。

1. 基础配置：回源 (Origin Pull) 🎯

回源是 CDN 节点没有数据时，找你的服务器拿数据的过程。这里有两个核心概念最容易搞混：

1.1 回源 Host (非常重要！)

配置项：回源 Host (Host Header)
含义：CDN 节点在请求你的源站服务器时，HTTP 请求头里 Host 字段填什么。
避坑指南 ：
- ✅ 通常填加速域名 ：比如你的网站是 www.example.com，回源 Host 就填 www.example.com。这样你的 Nginx 才能根据 server_name 找到正确的站点配置。
- ❌ 不要填源站 IP ：除非你的 Nginx 只有一个默认站点且不关心域名，否则填 IP 会导致 Nginx 走到 default_server 或者直接拒绝访问。

1.2 源站地址

IP vs 域名 ：
- IP：速度快，减少一次 DNS 解析。适合源站是固定 IP 的云服务器。
- 域名：适合源站是 OSS、Load Balancer 或 IP 可能会变的场景。

2. HTTPS 与证书配置 🔒

这是最容易出现"访问受限"或"不安全提示"的地方。

2.1 证书传给谁？

原则：CDN 替你面对用户，所以 CDN 必须持有你的域名证书。
操作：在 CDN 控制台上传 www.example.com 的 SSL 证书（公钥+私钥）。
误区：不需要上传 CDN 厂商分配给你的那个 .cdn.dnsv1.com 的证书，用户看的是你的域名。

2.2 强制 HTTPS 与 HSTS

强制 HTTPS ：✅ 推荐开启。将 HTTP 请求 301 重定向到 HTTPS。
HSTS (HTTP Strict Transport Security) ：⚠️ 慎用！
- 后果：一旦开启，浏览器会记住"这个网站只能用 HTTPS"。如果你证书过期了或者配置回退到 HTTP，用户将彻底无法访问（且无法通过"继续访问"跳过警告）。
- 建议：除非你对证书续期自动化非常有信心，否则初期不要开启 HSTS，或者设置较短的 max-age。

3. 缓存策略 (Caching) 🚀

缓存配置决定了 CDN 的性价比和用户体验。对于 Vue/React 等 SPA 项目，策略尤为关键。

3.1 黄金法则：动静分离

HTML 文件 (index.html)：永不缓存 (no-cache) 或短缓存 (e.g., 1分钟)。
- 原因：前端发版后，入口 HTML 变了才能引入新的 CSS/JS。如果 HTML 被缓存死，用户永远看不到新版。
静态资源 (.js, .css, .png)：长缓存 (e.g., 30天或1年)。
- 前提：你的打包工具（Webpack/Vite）开启了 Hash 文件名 (如 app.7ab53.js)。文件名变了就是新文件，旧文件缓存多久都没关系。

3.2 忽略参数 (Ignore Query String)

场景：访问 xxx.jpg?v=1 和 xxx.jpg?v=2。
建议：开启"忽略参数" 。
- 除非你的图片是用参数来控制裁剪/缩放的，否则对于静态文件，参数不同通常内容相同。开启后能极大提高缓存命中率。

4. 刷新与预热 (Refresh & Prefetch) 🔄

当你更新了网站内容，CDN 节点上可能还是旧的。

URL 刷新：精准清除单个文件。适合更新了某张图片或修正了某个 JS bug。
目录刷新 ：清除整个路径。适合大版本发布。
- 注意：目录刷新比较慢，且对源站压力大（因为所有文件都要重新回源）。
预热：主动让 CDN 节点去拉取你的文件。适合大促活动前的热门商品图。

5. 安全防护 🛡️

5.1 防盗链 (Referer 防盗链)

作用：防止别人的网站直接引用你的图片，偷你的流量。
配置：设置白名单（你的域名）。
避坑：是否允许空 Referer？
- ✅ 允许：如果你希望用户能直接在浏览器地址栏打开图片，或者在微信/QQ 这种不带 Referer 的 App 里看图。
- ❌ 拒绝：安全性最高，但可能误伤直接访问的用户。

5.2 IP 频率限制

如果发现流量异常飙升，可以配置单 IP 每秒请求数限制 (QPS)，防止被 CC 攻击刷爆账单。

6. 特殊场景：反向代理与子路径 📂

场景描述 ：

假设你有一个主网站 www.example.com，现在开发了一个独立的子系统（如"营销活动页"或"管理后台"），希望挂载到主域名的 /sub-app/ 路径下访问，而不是申请新的子域名。

Nginx 配置 (主站服务器) ：

nginx 复制代码

# 在 www.example.com 的 server 块中添加：
location /sub-app/ {
    # 将请求转发到本机 8080 端口运行的子系统
    proxy_pass http://127.0.0.1:8080/sub-app/; 
    
    # 传递真实域名，防止后端识别错误
    proxy_set_header Host $host; 
    proxy_set_header X-Real-IP $remote_addr;
}

CDN 陷阱 ：
- CDN 可能会缓存 404 页面！如果你刚配好 Nginx 前访问过一次是 404，CDN 记住了。配好后怎么访问还是 404？
- 解法：去 CDN 控制台刷新该 URL。
资源路径 (关键) ：
- 子系统的 HTML 里引用的 JS/CSS 必须是 相对路径 (./js/app.js) 或 带前缀的绝对路径 (/sub-app/js/app.js)。
- 如果写成 /js/app.js，CDN 回源时会请求 www.example.com/js/app.js（主站目录），导致 404。