使用Workbox registerRoute缓存Firebase Storage图片遇CORS问题求助

• 确认CORS配置已生效
  执行gsutil cors get gs://<你的存储桶名称>，检查返回的配置是否和你编写的cors.json完全一致。如果不一致，重新执行gsutil cors set cors.json gs://<你的存储桶名称>，确保配置正确应用到目标存储桶——注意存储桶名称是全局唯一的，不要填错。

• 放宽CORS响应头限制
  当前cors.json里responseHeader仅允许Content-Type，但浏览器处理CORS请求时，可能需要服务器返回额外的响应头（比如Access-Control-Allow-Origin）。尝试把responseHeader改为["*"]，覆盖所有允许的响应头：

  [
    {
      "origin": ["*"],
      "method": ["GET"],
      "responseHeader": ["*"],
      "maxAgeSeconds": 3600
    }
  ]
  

  重新上传配置后再测试。

• 缩小Workbox路由的匹配范围
  你的正则https://firebasestorage.googleapis.com/v0/b/.*会匹配所有Firebase Storage的v0请求，包括不带?alt=media的文件元数据请求，这类请求的CORS处理可能引发错误。可以把路由规则改成只匹配实际的图片资源：

  new RegExp('https://firebasestorage.googleapis.com/v0/b/.*?/o/.*\\.(png|jpg|jpeg|gif|webp)\\?alt=media')
  

  这样只会缓存图片文件，避免误匹配其他类型的请求。

• 清除旧缓存与Service Worker
  浏览器可能留存了之前不符合CORS规则的响应，或者旧的Service Worker脚本。在浏览器开发者工具的Application面板中：

  • 删除Cache Storage下的images缓存
  • 注销并重新注册Service Worker
    刷新页面后重新测试。

• 检查请求与响应的CORS细节
  打开浏览器开发者工具的Network面板，筛选Firebase Storage的图片请求：

  • 确认请求的mode是cors
  • 查看响应头是否包含Access-Control-Allow-Origin: *
    如果响应头里没有这个字段，说明CORS配置仍未生效，需要重新检查存储桶的配置是否正确上传。

内容的提问来源于stack exchange，提问作者Gabriel de Oliveira