实战讲解 Nginx 针对移动端 CDN 节点的缓存 Vary 头部适配-Nginx-PHP中文网

移动端CDN缓存失效主因是Vary配置不当：需用map将User-Agent等映射为稳定枚举值（如mobile/tablet/desktop），再通过X-Device-Type等自定义头精准设置Vary，并在CDN中显式将其纳入缓存键。

实战讲解 nginx 针对移动端 cdn 节点的缓存 vary 头部适配

移动端 CDN 缓存失效或命中率低，常因 Vary 头部配置不当导致——Nginx 若未正确识别并传递移动端特有请求特征（如 User-Agent、Accept、Cloudflare-Is-Mobile 等），CDN 节点会把 PC 和移动版本混为一缓存，造成内容错乱或降级。

明确 Vary 的作用与风险点

Vary 响应头告诉 CDN 或浏览器：“哪些请求头的差异会导致响应内容不同，必须分开缓存”。若 Nginx 向上游或客户端返回了不精准的 Vary，CDN 就可能过度细分缓存（如按完整 User-Agent 字符串缓存，导致百万级变体）或完全忽略差异（如未声明 Vary: User-Agent 却返回不同 HTML），引发严重问题。

关键原则：只在内容真有差异时才设 Vary，且值必须精简、稳定、可预测。移动端适配常见真实差异维度包括：

是否为移动设备（通过 User-Agent 判断，但不直接 Vary 完整 UA）
是否支持 WebP（通过 Accept 判断）
是否启用 AMP（通过自定义请求头如 X-AMP-Request）
CDN 提供的标准化设备标识（如 Cloudflare 的 CF-Device-Type）

用 map 模块构建稳定、可缓存的设备标记

避免直接 Vary: User-Agent——UA 字符串千变万化，会炸掉 CDN 缓存粒度。正确做法是：在 Nginx 内部用 map 将 UA 归类为有限枚举值（如 mobile/tablet/desktop），再基于该变量控制响应和 Vary。

示例配置（放在 http 块）：

map $http_user_agent $device_type {
    default desktop;
    ~*[Tt]ablet  tablet;
    ~*[Mm]obi|[Aa]ndroid|[Ii]phone|[Ii]pad  mobile;
}
map $http_accept $webp_support {
    default "0";
    ~*webp "1";
}

这样生成的 $device_type 是稳定字符串，适合参与缓存键和 Vary 决策。

精准设置 Vary 并同步给 CDN

仅当后端实际返回了差异化内容时，才在响应中添加对应 Vary。例如：

HTML 页面做了服务端移动适配 → Vary: X-Device-Type（你自定义的头）或 Vary: Device-Type
图片资源根据 Accept 返回 WebP/JPEG → Vary: Accept
同时适配设备 + 图片格式 → Vary: X-Device-Type, Accept（逗号分隔，空格敏感）

务必确保 Nginx 在代理到 CDN 前已注入这些头。例如在 location 中：

location / {
    proxy_pass https://origin;
    proxy_set_header X-Device-Type $device_type;
    proxy_set_header X-WebP-Support $webp_support;
<pre class="brush:php;toolbar:false;"># 只对 HTML 启用设备维度 Vary
if ($sent_http_content_type ~* "text/html") {
    add_header Vary "X-Device-Type" always;
}
# 对图片资源启用 Accept Vary（注意：部分 CDN 不缓存带 Vary: Accept 的图片，需确认）
if ($sent_http_content_type ~* "image/.*") {
    add_header Vary "Accept" always;
}

}

⚠️ 注意：add_header 在条件块中需加 always，否则 304 响应不携带 Vary，CDN 可能误判。