Angularfire2：如何从 Firebase 存储中检索文件内容

Posted 2023-03-22

【中文标题】Angularfire2：如何从 Firebase 存储中检索文件内容

【英文标题】：Angularfire2: how to retrieve file content from Firebase storage

【发布时间】：2021-02-01 15:07:21

【问题描述】：

我正在使用 Angulfire2 开发一个 Ionic 应用程序。

我已成功将文件上传到 Firebase。

我找到了方法 getDownloadURL 来检索文件 URL，这可以很好地在 html 页面中显示它。

但是我找不到下载文件内容的方法。我尝试执行这样的 http 请求：

let headers = new HttpHeaders( "Content-Type": "image/png" );
let imageGet = this.http.get(firestorageImageURI,  headers: headers ).subscribe((response) => 
    debugger;
);

但是我在控制台中有一个 CORS 错误：

访问 XMLHttpRequest 在 'https://firebasestorage.googleapis.com/v0/b/xxxx.appspot.com/o/edls%2Fb2478a2b-48eb-4056-94c8-e83d858cd519%2Fb2478a2b-48eb-4056-94c8-e83d858cd519_b_1603046492alt694.png=&token? =8ce76185-dd05-451e-919e-49f695145237' from origin 'http://localhost:8101' 已被 CORS 策略阻止： 请求中不存在“Access-Control-Allow-Origin”标头 资源。

我还配置了 CORS 以允许所有来源，如此处详述： https://firebase.google.com/docs/storage/web/download-files

但它并没有改变错误。

我还把存储规则改成了：

rules_version = '2'; 
service firebase.storage    
  match /b/bucket/o 
     match /allPaths=** 
          allow read, write: if true;
        
   

有人知道如何使用 angularfire2 从 Firebase 存储下载文件吗？

提前致谢

【参考方案1】：

发现了问题，不应该发送查询的标题。