如何配置让浏览器定期从AWS CloudFront获取资源而非仅用本地缓存？

核心逻辑 #

浏览器的缓存行为完全由响应头中的缓存控制字段决定，你需要通过CloudFront配置返回给浏览器的Cache-Control等头信息，平衡本地缓存的便利性和资源更新的及时性。

1. 配置CloudFront的浏览器缓存策略 #

在CloudFront中创建或修改缓存策略（Cache Policy），重点设置以下规则：

• 设置Max-Age：定义浏览器可直接使用本地缓存的时长（比如设为86400即1天，可根据你的资源更新频率调整）。
• 添加must-revalidate指令：当Max-Age过期后，浏览器必须向CloudFront发送条件请求（而非直接使用过期缓存），验证资源是否有更新。

示例最终返回给浏览器的Cache-Control头：

Cache-Control: max-age=86400, must-revalidate

设置后，浏览器在1天内直接用本地缓存；过期后会自动向CloudFront发起验证：若资源未更新，CloudFront返回304 Not Modified，浏览器继续用本地缓存；若资源已更新，CloudFront返回新内容，浏览器同步更新本地缓存。

2. 确保源站返回验证头 #

让你的源站（比如S3）返回ETag或Last-Modified头：

• S3默认会为对象生成ETag（基于文件内容的哈希），CloudFront会保留并转发这个头。
• 当浏览器发送条件请求时，CloudFront会通过这些头判断资源是否变化，既避免不必要的源站请求，又能保证浏览器获取最新状态。

3. 规避错误的缓存指令 #

• 不要使用immutable指令：该指令会让浏览器在Max-Age有效期内完全跳过验证，即使手动刷新页面也不会请求CloudFront，导致长期使用旧缓存。
• 不要设置过长的Max-Age：你之前遇到的“两周不刷新就一直用本地缓存”，本质是之前的Max-Age设置远超两周，导致浏览器认为缓存仍有效。

4. 静态资源版本化（可选但推荐） #

对CSS、JS、图片这类静态资源，在文件名中加入内容哈希（比如style.abc123.css）：

• 资源内容更新时，文件名同步变化，浏览器会自动识别为新资源，直接从CloudFront拉取，无需等待缓存过期。
• 这种方式可配合较长的Max-Age（比如1年），既最大化利用本地缓存，又能确保用户总能拿到最新资源。

关于Age头的说明 #

你观察到的Age头固定为1796是正常现象：Age是CloudFront返回的字段，代表资源在CloudFront缓存中的存储时长。当浏览器从本地缓存加载资源时，不会重新请求CloudFront，因此这个值会停留在上次请求CloudFront时的数值，不会递增。

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