Service Worker预缓存Firebase Storage图片失败问题排查

核心问题出在Firebase Storage的CORS配置缺失，和Firebase Hosting的头设置无关。

为什么预缓存会触发CORS错误？ #

cache.add()方法默认会以cors模式发起请求，要求目标资源返回Access-Control-Allow-Origin头；而运行时缓存图片时，浏览器通常是以no-cors模式加载资源（比如<img>标签），这种模式不要求CORS头，所以运行时能正常缓存。

解决步骤：配置Firebase Storage的CORS规则 #

1. 创建一个名为cors.json的文件，内容如下（替换成你的实际域名）：

[
  {
    "origin": ["https://app.myproject.com"],
    "method": ["GET"],
    "maxAgeSeconds": 3600
  }
]

如果需要允许多个域名，可在origin数组中添加更多值，比如["https://app.myproject.com", "http://localhost:3000"]。

2. 使用Google Cloud SDK的gsutil命令部署配置：

gsutil cors set cors.json gs://myproject

这里的myproject是你的Firebase Storage存储桶名称（对应链接里的b/myproject部分）。

3. 部署后等待几分钟让配置生效，再重新测试Service Worker的预缓存功能。

额外说明 #

Firebase Hosting的头配置仅作用于Hosting托管的资源，而你的请求是直接发送到firebasestorage.googleapis.com，所以Hosting的设置不会影响这个CORS问题。

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