Angular无法加载Firebase Storage图片URL问题求助

这个错误ERROR Error: "Uncaught (in promise): Response with status: 0 for URL: null"几乎都是CORS跨域限制导致的，而且其实你当前的代码完全绕远路了——Firebase Storage生成的这个URL本身就是可直接访问的图片地址，没必要通过HTTP请求再转Blob。下面给你两种解决方案，按需选择：

方案1：直接使用Firebase Storage URL（推荐） #

既然这个URL本身就是有效的图片链接，直接把它传给Angular的安全管道处理后绑定到<img>的src即可，省去HTTP请求的步骤，也避开了CORS问题：

ngOnInit(): void { 
  const imageUrl = 'https://firebasestorage.googleapis.com/v0/b/heimatvoll-1785b.appspot.com/o/Blogs%2FBasic%20Blog%20Banner%2Fcook-366875_1280.jpg?alt=media&token=bb08b895-55c4-404d-aedc-1a77fceacf74'; 
  this.imageData = this.sanitizer.bypassSecurityTrustUrl(imageUrl);
}

然后在模板里直接使用：

<img [src]="imageData" alt="Blog Banner">

方案2：配置CORS规则（仅当你确实需要获取Blob时） #

如果你因为业务需求必须把图片转成Blob（比如要做图片裁剪、上传到其他服务等），那需要给Firebase Storage配置允许你前端域名访问的CORS规则：

1. 本地创建一个名为cors.json的文件，内容如下（允许所有域名访问，你可以把"origin": ["*"]改成你的具体域名，比如["https://your-app-domain.com"]）：

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

2. 安装Google Cloud SDK（包含gsutil工具），然后登录你的Google账号：

gcloud auth login

3. 执行以下命令把CORS规则应用到你的Firebase Storage桶：

gsutil cors set cors.json gs://heimatvoll-1785b.appspot.com

配置完成后，你的原有HTTP请求代码就能正常工作了，不过还是推荐方案1，更高效简洁。

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