Firebase 存储的跨域读取阻塞 (CORB) 错误答案

【问题标题】：Cross-Origin Read Blocking (CORB) error with Firebase StorageFirebase 存储的跨域读取阻塞 (CORB) 错误
【发布时间】：2019-08-15 22:08:40
【问题描述】：

我正在使用下载 URL 从我的 Firebase 存储中获取 HTML 文件并将其显示在模板中。在我的模板中，我使用 <img> 并将 src 设置为下载 URL。浏览器显示一个损坏的文件，控制台显示

Cross-Origin Read Blocking (CORB) blocked cross-origin response https://firebasestorage.googleapis.com/v0/b/languagetwo-cd94d.appspot.com/o/English_Videos%2FWalker_Climbs_a_Tree%2Fscript.html?alt=media&token=8772258d-9417-4f93-b16d-29d353c5262

然后是下载 URL。当我把它放在浏览器窗口中时，下载 URL 有效。正如documentation 建议的那样，我制作了这个文件

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

将其命名为 cors.json，然后运行

gsutil cors set cors.json gs://languagetwo-cd94d.appspot.com

我更新了gsutil。我清除了我的 Chrome 缓存。我在 Chromium 中尝试了我的应用程序。我试过POST 而不是GET。我仍然收到CORB错误。我还应该尝试什么？需要设置Content-Type吗？

【问题讨论】：

“我正在使用下载 URL 从我的 Firebase 存储中获取 HTML 文件并将其显示在模板中。在我的模板中，我使用 <img> 并将 src 设置为下载 URL。” — 鉴于此，听起来浏览器正在阻止您的前端代码访问响应，因为您正在尝试使用在浏览器需要图像的上下文中的 text/html 响应。无论如何，根据问题中引用的错误消息，您遇到的是 CORB 问题，而不是 CORS 问题。因此，您的 CORS 配置不会对此产生任何影响。
感谢stackoverflow.com/users/441757/sideshowbarker，当我删除标记时，CORB 错误消息消失了。现在我的页面显示下载 URL。如何将下载 URL 转换为 HTML 文件？
我正在使用 $http.get(downloadURL)。它几乎可以工作了，我的模板正在显示文件，但 HTML 标记也正在显示...

标签： cors google-cloud-storage firebase-storage

【解决方案1】：

sideshowbarker 是对的，问题是我使用 <img> 来显示 HTML 文本文件。当我摆脱<img> 标签时，CORB 错误消失了。相反，我使用$http.get(downloadURL) 获取文件，然后使用$sce.trustAsHtml(doc.data); 清理HTML，然后在AngularJS 模板中我使用<div ng-bind-html="myFile"></div> 在模板中显示它。这是 AngularJS 控制器代码：

firebase.firestore().collection('Videos').doc($scope.longLanguage).collection($scope.longLanguage + '_Videos').doc($scope.movieTitle).collection('Clips').doc($scope.movieTitle + '_999999').get()
  .then(function(doc) {
    $http.get(doc.data().lyricsDownloadURL)
    .then(function(doc) {
      $scope.lyrics = $sce.trustAsHtml(doc.data);
    })
    .catch(error => console.error(error));
  })
  .catch(error => console.error(error));

这里是 AngularJS 模板：

<div class="col-sm-6 col-md-6 col-lg-6">
  <div ng-bind-html="lyrics"></div>
</div>

【讨论】：