Workbox离线无法获取缓存网络请求，疑与Vary头部相关

开发者阿泽

2026-7-19

PWA运行时缓存离线失效问题

问题背景与现象

技术栈：基于Workbox的VitePWA包，采用GenerateSW模式构建Service Worker，用于缓存Laravel后端API响应以支持离线使用。
异常情况：功能上线初期测试正常，近6-8周未修改PWA相关代码的情况下出现离线失效。缓存存储中存在正确的API响应数据，但对比服务器响应，缓存响应的Vary头部多了Authorization字段（格式为Origin,Authorization, Accept-Encoding）。
报错信息：Workbox控制台抛出以下错误：

Network request for '/system/api/v1/settings' threw an error. TypeError: Failed to fetch
    at StrategyHandler.fetch (workbox-96d32552.js:2840:33)
    at StrategyHandler.fetchAndCachePut (workbox-96d32552.js:2880:37)
    at NetworkFirst._getNetworkPromise (workbox-96d32552.js:3720:36)
    at NetworkFirst._handle (workbox-96d32552.js:3640:37)
    at NetworkFirst._getResponse (workbox-96d32552.js:3330:33)

当前运行时缓存配置

...
urlPattern: /^regexPattern$/,
  handler: 'NetworkFirst',
  options: {
    cacheName: 'api',
    expiration: {
      maxEntries: 500,
      maxAgeSeconds: 60 * 60 * 24 * 365 * 2
    },
    cacheableResponse: {
      statuses: [0, 200]
    }
  }
...