假设当前网站同时具有 PC 端和移动端页面时,为了让用户访问方便,网站的 PC 端和移动端的资源均使用相同 URL 访问,但是因为屏幕分辨率的差异,前端为了将内容适配到移动端,图片的分辨率大小是不一致的,此时需要能根据用户在请求时携带的 User-Agent 头部来区分响应的图片 A 适配 PC 端,图片 B 适配移动端。为了避免响应的图片内容被缓存导致移动端访问的内容与 PC 端内容一致,此时源站可在响应图片时增加 Vary:User-Agent 来指定节点根据用户请求的 User-Agent 头部区分缓存。
场景二:URL 相同,根据访问来源响应跨域头
假设当前页面内存在同一个图片文件分别被域名 A 和域名 B 引用时,为了避免出现跨域错误,通常需要在源站响应文件时为该文件增加Access-Control-Allow-Origin来实现允许跨域访问,但是如果当前文件被缓存,则可能出现跨域头一起被缓存导致出现跨域访问错误的问题。此时源站可以在响应 Access-Control-Allow-Origin 跨域头的同时,增加 Vary:origin 头部,来指定节点根据用户请求的 Origin 头部区分缓存。