cors - Firebase 存储的跨域读取阻塞 (CORB) 错误

Question

我正在使用下载 URL 从我的 Firebase 存储中获取 HTML 文件并将其显示在模板中。在我的模板中，我使用 <img>与 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 有效。作为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 Controller 代码:

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>