如何配置AWS CloudFront与S3缓存避免SPA书签加载过时index.html

针对你遇到的SPA缓存问题，以下是逐个问题的明确解答和优化方案：

1. Chrome/Edge书签打开无Cache-Control头的index.html是否跳过ETag检查？ #

是的。当index.html没有设置Cache-Control头时，Chrome/Edge在书签打开这类“重复访问”场景下，会触发浏览器的启发式缓存策略——根据文件的Last-Modified时间计算默认缓存时长（通常是文件年龄的10%），此时浏览器会直接加载磁盘缓存，不会发送带If-None-Match（ETag验证）或If-Modified-Since的条件请求，导致无法检测到index.html的更新，进而加载旧的JS/CSS资源。

2. SPA的403→200返回index.html配置是否影响缓存？如何优化？ #

会影响缓存逻辑。CloudFront对自定义错误响应的缓存规则和正常响应不同：

• 默认情况下，CloudFront会缓存403转200返回的index.html，且缓存行为的配置（比如TTL、Cache-Control修改）不会自动应用到错误响应上，导致index.html的缓存策略失效。
• 另外，错误响应的缓存TTL默认由CloudFront控制，可能和你期望的“始终检查更新”冲突。

优化方案： #

放弃403→200的自定义错误响应配置，改用请求重写处理SPA路由：

• 使用CloudFront Functions（成本更低、性能更好）或Lambda@Edge的Viewer Request事件，直接在请求到达CloudFront时判断：如果请求路径不是具体文件（无扩展名，如/about、/dashboard）且不是index.html，就将请求路径重写为/index.html。
• 示例CloudFront Functions代码：

function handler(event) {
    const request = event.request;
    const uri = request.uri;

    // 如果路径不是文件（无扩展名）且不是根路径/index.html
    if (!uri.includes('.') && uri !== '/index.html') {
        request.uri = '/index.html';
    }

    return request;
}

这种方式避免了错误响应的缓存问题，所有SPA路由请求都会直接命中index.html的正常缓存行为。

3. 如何配置缓存确保index.html始终检查更新，同时静态资源长期缓存？ #

采用分路径缓存策略，结合源站（S3）和CloudFront的配置，实现精准控制：

步骤1：配置S3对象的Cache-Control头 #

• 对index.html设置：Cache-Control: no-cache, must-revalidate
  • no-cache强制浏览器每次都要向服务器验证资源是否更新；must-revalidate确保缓存过期后必须验证，不能用启发式缓存。
• 对带哈希的静态资源（如app.abc123.js、style.def456.css）设置：Cache-Control: public, max-age=31536000, immutable
  • max-age=31536000表示缓存1年；immutable告诉浏览器资源内容不会变化，无需发起条件请求，进一步优化性能。

步骤2：配置CloudFront缓存行为 #

创建两个独立的缓存行为，分别处理index.html和静态资源：

1. 缓存行为1：匹配index.html
   • 路径模式：index.html
   • 缓存策略：
     • 选择自定义缓存策略，设置Minimum TTL=0、Maximum TTL=0、Default TTL=0（让CloudFront完全尊重S3返回的Cache-Control头）
     • 缓存键包含Host头部（确保多域名场景下缓存隔离），无需包含查询字符串（除非你的index.html依赖查询参数）
     • 源请求策略选择CORS-S3Origin或自定义策略，确保If-None-Match（ETag）、If-Modified-Since等头部能传递到S3，实现条件验证。
2. 缓存行为2：匹配所有其他资源（*）
   • 路径模式：*
   • 缓存策略：
     • 选择自定义缓存策略，设置Minimum TTL=31536000、Maximum TTL=31536000、Default TTL=31536000
     • 缓存键可以忽略查询字符串（因为静态资源带哈希，文件名唯一）
     • 源请求策略用默认的CachingOptimized即可。

步骤3：验证配置 #

部署后通过浏览器开发者工具（Network面板）检查：

• 访问index.html时，响应头包含Cache-Control: no-cache, must-revalidate，且每次书签打开都会发送If-None-Match请求，CloudFront会回源验证是否更新。
• 静态资源的响应头包含Cache-Control: public, max-age=31536000, immutable，且后续访问直接从磁盘缓存加载，不会发起请求。

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