Question

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

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放在浏览器窗口中时可以使用。根据{{3}}的建议，我制作了这个文件

[
  {
    "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>

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

1 个答案: