Angular6 Service Worker无法处理Firebase Storage URL（疑似CORS问题）

阿华AIGC实验室

2026-5-27

解决Angular 6 Service Worker无法处理Firebase Storage URL的CORS问题

你找对了方向——这个问题确实是CORS配置不匹配导致的，但你当前在firebase.json里配置的headers只对Firebase Hosting托管的资源生效，而Firebase Storage的资源是从独立的存储域名（比如storage.googleapis.com）加载的，所以这个配置根本没覆盖到Storage的请求。

下面是具体的解决步骤：

1. 直接配置Firebase Storage的CORS规则

你需要给Firebase Storage桶单独设置CORS规则，操作如下：

创建一个名为cors.json的文件，内容可以参考下面的模板（建议把origin改成你的实际域名，而不是*，提升安全性）：
```
[
  {
    "origin": ["*"],
    "method": ["GET"],
    "maxAgeSeconds": 3600
  }
]
```
打开终端，使用Firebase CLI（确保已安装并登录）执行以下命令，将配置上传到你的Storage桶：
```
gsutil cors set cors.json gs://<你的存储桶名称>
```
你的存储桶名称可以在Firebase控制台的Storage页面找到，格式一般是你的项目ID.appspot.com。

2. 检查Service Worker的请求处理逻辑

如果你的Service Worker自定义了fetch事件处理，确保请求Firebase Storage资源时设置了mode: 'cors'，示例代码：

self.addEventListener('fetch', (event) => {
  if (event.request.url.includes('storage.googleapis.com')) {
    event.respondWith(
      fetch(event.request, { mode: 'cors' })
        .then(response => {
          // 这里可以添加自定义缓存逻辑
          return response;
        })
    );
  }
});