如何配置使浏览器为同域名不同路径复用同一缓存条目？

问题背景 #

同一域名下的不同路径（如some_domain.com/first和some_domain.com/second）返回完全相同的index.html（React Router单页应用场景），但浏览器会将不同路径视为独立资源，无法复用已有缓存，导致重复请求。

核心原因 #

浏览器默认以完整请求URL作为缓存键，即使内容一致，不同URL也会生成独立缓存条目。要实现缓存复用，需让浏览器将这些不同路径的请求映射到同一个缓存标识。

具体解决方案 #

1. 使用Cache-Key响应头（推荐，现代浏览器支持） #

这是HTTP规范新增的响应头，可直接指定统一的缓存键，让浏览器忽略路径差异，复用同一缓存。

• 服务端配置示例（Nginx）：

  location / {
    try_files $uri $uri/ /index.html;
    # 为所有返回index.html的请求设置统一缓存键
    add_header Cache-Key "spa-index-html";
    # 配合持久化缓存头，确保缓存长期有效
    add_header Cache-Control "public, max-age=31536000, immutable";
  }
  

• 效果：首次访问任意路径后，后续访问其他同内容路径会直接读取本地缓存，无需发起任何请求。

2. ETag + 验证式缓存（兼容性方案） #

如果需要兼容不支持Cache-Key的旧浏览器，可通过ETag和Cache-Control组合实现：

• 服务端确保所有返回的index.html生成相同的ETag（基于文件内容哈希生成，而非路径）；

• 配置Cache-Control强制浏览器每次请求都验证缓存有效性，若内容未变则返回304 Not Modified，无需重新下载文件。

• Nginx配置示例：

  location / {
    try_files $uri $uri/ /index.html;
    # 开启ETag，Nginx默认基于文件内容生成
    etag on;
    # 强制浏览器验证缓存，避免直接使用过期缓存
    add_header Cache-Control "public, max-age=0, must-revalidate";
  }
  

• 效果：首次访问新路径时会发起请求，但仅需验证缓存，无需下载完整文件，带宽开销极低。

3. Service Worker拦截（客户端层面解决） #

通过Service Worker拦截所有导航请求，直接返回已缓存的index.html，彻底绕过浏览器默认的URL缓存逻辑。

• Workbox配置示例：

  import { registerRoute } from 'workbox-routing';
  import { CacheFirst } from 'workbox-strategies';
  
  // 拦截所有导航请求（即页面跳转的请求）
  registerRoute(
    ({ request }) => request.mode === 'navigate',
    // 使用缓存优先策略返回缓存的index.html
    new CacheFirst({
      cacheName: 'spa-index-cache',
    })
  );
  

• 效果：首次加载后，所有路由切换都直接读取Service Worker缓存，完全避免对index.html的重复请求。

内容的提问来源于stack exchange，提问作者Andrei K.