Firebase-Storage 访问“..”已被 CORS 策略阻止：请求的资源上不存在“Access-Control-Allow-Origin”标头

Question

我正在使用以下代码加载图像：

const blob = await fetch(
    "https://firebasestorage.googleapis.com/...?alt=media"
  )
  .then((r) => r.blob())
  
const reader = new FileReader();

reader.onload = function() {
  const objectUrl = reader.result as string;
  // do something with object url
};

reader.readAsDataURL(blob);

但是，我在浏览器控制台中收到以下 CORS 阻止错误：

从来源“http://localhost:5000”访问“https://firebasestorage.googleapis.com/...?alt=media”处的图像已被 CORS 策略阻止：没有“Access-Control-Allow-” Origin' 标头存在于请求的资源上。

如果我将url粘贴到浏览器地址栏中，则图像加载成功，这意味着该资源存在并且资源路径是正确的。

我查找了如何修复此错误并找到了以下 stackoverflow 帖子：

1. Firebase 存储和访问控制允许来源
2. Firebase 存储访问“..”已被 CORS 策略阻止：请求的资源上不存在“Access-Control-Allow-Origin”标头

以上两篇文章都建议我创建以下 CORS 配置并使用

gsutil

CLI 工具更新它。

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

我从我的 GCP 帐户打开 Cloud Shell，并使用以下

gsutil

命令更新我的存储桶的 CORS 配置。

$ gsutil cors set cors.json gs://my-bucket-name

我什至执行了读取查询以查看 CORS 配置是否已正确更新，并得到以下结果：

$ gsutil cors get gs://my-bucket-name
[{"maxAgeSeconds": 3600, "method": ["GET"], "origin": ["*"]}]

我认为在配置中添加“OPTIONS”方法可能会有所帮助，但没有运气。

我希望我没有做傻事。任何有关如何调试此问题的指示也将不胜感激。

以下是我的网络选项卡的快照，其中包含有关请求的更多详细信息：

Answer 1

在为这个问题苦思冥想了几天之后，我想尝试用一个全新的 Firebase 项目在隐身窗口中重现这个问题，但我没能做到。因此，我尝试以隐身方式运行我的原始项目，令我惊讶的是，我没有看到任何 CORS 问题。

我记得我的图像带有一个缓存控制标头，最大期限为 1 年，所以我假设浏览器可能已将之前的 CORS 阻止响应缓存了一年，这确实是真的，因为在 url 中附加一个虚拟查询参数使得

fetch

请求成功。因此，为了解决这个问题，我禁用了浏览器中的缓存并刷新了页面，令人惊讶的是，一切正常。一旦一切正常，您可以重新启用缓存，因为浏览器必须已使旧的缓存响应无效。

因此，如果您仅在开发阶段遇到此问题，您可以通过禁用 1 页刷新的缓存然后重新启用它来轻松解决此问题。但是，如果您已经将其部署到生产环境中并且您的用户看到了此问题，您可以考虑更改图像的 url，以便浏览器被迫发出新请求，或者一个黑客修复方法是在以下位置添加一个虚拟查询参数：网址末尾。