Flutter Firebase存储CORS问题答案

【问题标题】：Flutter firebase storage CORS issueFlutter Firebase存储CORS问题
【发布时间】：2021-04-27 03:37:50
【问题描述】：

我正在使用免费的 Firebase 存储计划。一切正常，但图像没有加载到我的颤振网络上。

我收到了这个错误。

Access to XMLHttpRequest at 'https://firebasestorage.googleapis.com/v0/b/sap-app-8318e.appspot.com/o/cover%2Fimage_cropper_028D7F16-0161-4E90-B40D-EE47D310F322-5339-000003697F67306C.jpg?alt=media&token=313475a9-9728-4e61-97da-f5d5534bb008' from origin 'https://sap.nextcardpro.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
firebasestorage.googleapis.com/v0/b/sap-app-8318e.appspot.com/o/cover%2Fimage_cropper_028D7F16-0161-4E90-B40D-EE47D310F322-5339-000003697F67306C.jpg?alt=media&token=313475a9-9728-4e61-97da-f5d5534bb008:1

我在谷歌上搜索了每个人都告诉需要允许来自 firebase 的 CORS 访问，但我怎么能添加它。但是如何将其添加到我的免费 Firebase 计划中？

[
    {
      "origin": ["*"],
      "responseHeader": ["Content-Type"],
      "method": ["GET", "HEAD", "DELETE"],
      "maxAgeSeconds": 3600
    }
]

【问题讨论】：

标签： firebase flutter-web

【解决方案1】：

经过2天的google搜索，终于通过这个帖子解决了。

https://bitmovin.com/docs/encoding/faqs/how-do-i-set-up-cors-for-my-google-cloud-storage-bucket

【讨论】：

太棒了！你救了我的命。谢谢！
就我而言，我没有 storage.buckets.get 访问 Google Cloud Storage 存储桶的权限。使用电子邮件帐户和服务帐户...任何解决方案。
感谢您提供的优质信息！ Arigatogozaimasu！
准确回答，谢谢！

【解决方案2】：

以上链接回答：

如果您已经熟悉 Google Cloud 服务和工具，例如 gcloud 和/或 gsutil，您还可以查看 Google 关于 CORS 的文档。

登录您的谷歌云控制台：https://console.cloud.google.com/home。点击右上角的“Activate Google Cloud Shell”（见下图）：

在您的窗口底部，将显示一个 shell 终端，其中 gcloud 和 gsutil 已经可用。执行如下所示的命令。它会创建一个 json 文件，用于设置存储桶的 cors 配置。此配置将允许每个域在浏览器中使用 XHR-Requests 访问您的存储桶：echo '[{"origin": ["*"],"responseHeader": ["Content-Type"],"method": ["GET", "HEAD"],"maxAgeSeconds": 3600}]' > cors-config.json

如果您想限制访问一个或多个特定域，请将其 URL 添加到数组中，例如：echo '[{"origin": ["https://yourdomain.com", "http://localhost:*"],"responseHeader": ["Content-Type"],"method": ["GET", "HEAD"],"maxAgeSeconds": 3600}]' > cors-config.json （根据您的需要，还添加了 localhost 以在开发时访问资源）。

在以下命令中将 YOUR_BUCKET_NAME 替换为您的实际存储桶名称，以更新存储桶 gsutil cors set cors-config.json gs://YOUR_BUCKET_NAME 中的 cors 设置

要检查一切是否按预期工作，您可以使用以下命令获取存储桶的 cors-settings：gsutil cors get gs://YOUR_BUCKET_NAME

您可以在项目的 Firebase 控制台的存储面板中找到存储桶 ID：

Firebase 控制台的存储面板是以gs://开头的值。

【讨论】：

【解决方案3】：

如果有人在安装 gsutil 时遇到问题。它不适用于最新的 python 3.10。您必须安装以前的版本号以 3.7 开头的版本

喜欢这个： download python 3.7.9

【讨论】：