要让 Nginx 的 proxy_cache 正确缓存 WebP 图片，关键在于按 Accept 头区分缓存键、改写回源路径、设置 Vary 和 MIME 类型，并实测验证；需在 http 块用 map 提取 $webp_suffix，proxy_cache_key 和 proxy_pass 中引用它，加 add_header Vary "Accept"，确保 mime.types 包含 image/webp webp;，最后用 curl 对比不同 Accept 请求的缓存命中与响应头。
要让 Nginx 的 proxy_cache 正确缓存 WebP 图片，关键不是“自动转换”，而是“按请求特征区分缓存、精准回源、避免格式错乱”。WebP 支持依赖客户端声明（Accept: image/webp），Nginx 需据此生成不同缓存键、改写回源路径，并确保源站能响应对应格式——否则缓存的可能是 404 或错误内容。
用 map 提取 WebP 支持信号
必须在 http 块顶层定义，不能放在 server 或 location 内：
map $http_accept $webp_suffix { default ""; "~*image/webp" ".webp"; }- 该变量后续用于重写 URL 或构造缓存键，是整个逻辑的起点
- 注意正则匹配需加引号，且大小写不敏感（
~*）
重写回源路径并控制缓存键
在 location 中启用缓存时，必须让缓存键包含 WebP 状态，同时确保回源请求能命中真实文件：
FastAPI Flask Proxy
下载
FastAPI + Flask 混合部署最佳实践，解决路由定义、API 代理等常见问题，适用于同时运行 FastAPI API 与 Flask 前端的场景。
- 回源改写示例：
proxy_pass https://origin.example.com$request_uri$webp_suffix;（$request_uri已含 query，避免重复拼接） - 缓存键必须唯一标识格式：
proxy_cache_key "$scheme$request_method$host$uri$is_args$args$webp_suffix"; - 若用
try_files方式（如静态文件直读），则用try_files $uri$webp_suffix $uri =404;，顺序不可颠倒
设置 Vary 头与 MIME 类型支持
仅靠缓存键还不够，HTTP 协议层需显式声明缓存变体依据：
- 必须添加：
add_header Vary "Accept";—— 否则 CDN 或浏览器可能把 WebP 缓存返回给不支持的客户端 - 确认
mime.types包含：image/webp webp;，否则 Nginx 可能以text/plain返回 WebP 文件 - 源站返回 WebP 时，应带正确
Content-Type: image/webp和Content-Length，便于边缘高效缓存
验证缓存是否真正生效
上线后不能只看配置，要实测响应头与缓存行为：
- 用
curl -H "Accept: image/webp" -I https://yoursite.com/image.jpg检查是否返回200+Content-Type: image/webp - 观察响应头中是否有
X-Cache: HIT（或你自定义的缓存状态头） - 对比
Accept: image/png请求的缓存状态，确认两者缓存键分离、互不干扰 - 检查磁盘缓存目录（如
/var/cache/nginx/static_cache）下是否存在对应路径的 WebP 缓存文件
