Firebase存储的跨源读取阻止（CORB）错误

Question

我正在使用下载网址从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吗？

Answer 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>