为什么Firefox会加载缓存页面？配置Cache-Control后iframe资源仍不更新

云原生阿岚

2026-9-28

问题原因

核心问题是你仅为父页面配置了禁止缓存的响应头，iframe指向的pdfjs viewer页面（/assets/js/pdfjs/web/viewer.html）、以及对应的PDF文件本身没有配置禁止缓存的规则。浏览器默认会对静态类资源启用缓存策略，如果这类子资源的响应头没有显式声明禁止缓存，在缓存有效期内浏览器不会重新向服务端发起请求，直接复用本地缓存内容，就会出现你看到的请求仍用原始文件名的情况。
你尝试添加的ETag未生效是因为ETag属于缓存验证机制，仅当浏览器确认需要向服务端验证缓存有效性时才会生效。如果子资源本身的缓存头配置了允许缓存的max-age/Expires规则，在缓存到期前浏览器不会发起验证请求，ETag自然不会生效。
普通刷新（非强制刷新）场景下，浏览器默认会优先复用主文档下子资源的有效缓存，也是该问题的触发原因之一。
额外排查点：PDF.js默认会将最近打开的文件参数存入浏览器本地存储/历史记录中，如果viewer.html没有禁用该特性，也可能出现强制加载旧文件的情况。

正确解决方案

你不需要用给父页面加随机字符串的hack手段，按以下优先级处理即可：

给所有iframe关联的子资源（html、pdf文件）配置和父页面一致的禁止缓存响应头：

Cache-Control: no-store, no-cache, must-revalidate, proxy-revalidate
Expires: 0
Pragma: no-cache

额外添加的proxy-revalidate字段用于要求中间代理服务器也不可复用缓存，Expires: 0可以兼容更旧版本的浏览器。

如果你的服务端静态资源由Apache托管，可以直接在pdfjs的web目录下添加.htaccess文件配置规则：

<FilesMatch "\.(html|pdf)$">
  Header set Cache-Control "no-store, no-cache, must-revalidate, proxy-revalidate"
  Header set Expires 0
  Header set Pragma "no-cache"
</FilesMatch>