已启用CORS的CDN资源被浏览器缓存后无法下载是什么原因？

核心原因和浏览器的缓存匹配逻辑、CORS头的返回规则直接相关：

• 浏览器缓存不是仅按资源URL匹配，而是会绑定请求的上下文属性存储
  你首次加载图片时，是在普通页面上下文发起的非跨域请求，浏览器不会附加Origin请求头，CDN侧只有收到带Origin的跨域请求时才会返回Access-Control-Allow-Origin等CORS相关响应头，这份不带CORS头的响应就会被存入本地缓存。
  后续你在跨域的预览模式下请求同一张图片时，浏览器会优先匹配已有缓存，发现缓存的响应缺少跨域必需的CORS头，就会直接触发拦截，根本不会发送请求到CDN重新验证。
• CDN未配置正确的Vary响应头会放大这个问题
  如果CDN返回的响应头没有添加Vary: Origin，浏览器会直接忽略不同请求的Origin差异，只要URL一致就复用缓存条目。哪怕后续的跨域请求带了合法的Origin字段，也会命中之前非跨域请求生成的无CORS头缓存，触发拦截。

• 配置CDN为所有静态资源响应强制附加CORS头，无论请求是否携带Origin字段，从根源避免缓存条目缺少CORS头的问题
• 在CDN的响应规则中添加Vary: Origin头，让浏览器针对不同Origin的请求分开存储缓存，避免不同上下文的缓存互相干扰
• 临时验证可以给跨域请求的资源URL添加随机查询参数（比如?v=随机值），强制浏览器跳过旧缓存发起新请求

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