要让 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 缓存文件