为何CloudFront对直接访问/iframe返回新PDF，fetch返回旧版本？

核心原因是不同请求场景的浏览器缓存策略差异： #

• 浏览器地址栏/iframe的缓存验证逻辑
  当你在地址栏输入URL或通过iframe加载资源时，浏览器默认会触发缓存验证流程：即使本地已有缓存，也会向CloudFront发送带If-Modified-Since或If-None-Match（ETag）的请求。由于你已经执行了CloudFront失效操作，CDN节点会回源拉取最新PDF，返回新内容的同时更新本地缓存，所以你能看到新版本。

• fetch API的默认缓存行为
  fetch API的默认缓存模式是default，这个模式下如果本地已有该URL的有效缓存（比如之前响应头里的Cache-Control: max-age=xxx有效期未过），会直接读取本地缓存，不会向CDN发起任何验证请求，自然拿到的是旧版本文件。

• 本地缓存的独立性
  CloudFront的失效操作只会清除CDN节点上的缓存，无法主动清空用户浏览器本地的缓存。直接访问URL时，浏览器的验证请求会触发CDN返回新内容，从而更新本地缓存；但fetch默认跳过了这个验证步骤，直接复用了之前的旧缓存。

解决方法（让fetch获取最新内容） #

只需修改fetch的缓存模式，强制触发缓存验证或跳过缓存：

fetch(this.fileUrl, { cache: 'no-cache' }) // 强制验证缓存有效性，有更新则返回新内容
  .then(file => file.blob())
  .then(pdfBlob => {
    const downloadFile = document.createElement('a');
    const objectUrl = URL.createObjectURL(pdfBlob);
    downloadFile.href = objectUrl;
    downloadFile.download = 'file.pdf';
    downloadFile.click();
    URL.revokeObjectURL(objectUrl);
});

可选的缓存模式：

• cache: 'no-cache'：向CDN发送验证请求，资源更新则返回新内容，否则复用缓存（304状态）
• cache: 'reload'：完全跳过本地缓存，直接从CDN拉取最新内容

内容的提问来源于stack exchange，提问作者Narayan