Flutter Firebase 存储 CORS 问题

Question

我正在使用免费的 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
    }
]

Answer 1

最后，经过 2 天的谷歌搜索，通过这个帖子解决。

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

Answer 2

我遇到了类似的问题，和往常一样，我花了几个小时才修复，但解决方案一如既往地简单易行。

\n

当您运行此命令时flutter run -d chrome --web-renderer canvaskit --no-sound-null-safety应用程序将运行，一切正常且像素完美，但遗憾的是网络图像无法加载。当您检查应用程序并查看控制台时，您会看到这个漂亮的错误

\n

\n

（被 CORS 策略阻止）：无 \xe2\x80\x98Access-Control：请求的资源上存在 Allow-Origin\xe2\x80\x99 标头。

\n

什么是 CORS？

\n

CORS 代表（跨源资源共享）。CORS 是一项浏览器安全功能，可限制从浏览器中运行的脚本发起的跨源 HTTP 请求。

\n

现在如何解决 CORS 问题？并显示来自任何其他域或 Firebase 存储的图像。答案很简单，请按照以下步骤操作

\n

\n
1. 打开GCP 控制台您将看到以下屏幕
\n

\n

\n

\n
2. 现在选择您的项目并单击仪表板按钮。
\n

\n

\n

\n
3. 单击启动云终端>_顶部导航栏中的图标按钮启动云终端，如下图所示
\n

\n

\n

\n
4. 单击打开编辑器按钮（等待几秒钟）
\n

\n

\n

\n
5. 现在单击 3 (...) 点并创建新文件并将其命名为cors.json，如下图所示
\n

\n

\n

\n

6. 复制并粘贴此代码

   \n

   [ {“来源”：[“*”]，“方法”：[“GET”]，“maxAgeSeconds”：3600}]

   \n
\n

\n

在您注意到的代码中，我设置了原点*，这意味着每个网站都可以显示您的图像。但您也可以在那里插入您网站的域名来限制访问。

\n

\n

7. 现在运行命令：gsutil cors set cors.json gs://your-bucket当你运行时，gsutil cors set cors.json gs://your-bucket你会得到漂亮的错误 (\xe2\x80\x98 gsutil ServiceException: 401 Anonymous caller does not have storage.objects.list access to bucket \xe2\x80\x99) it\xe2\x80\ x99s 意味着您需要先登录。

   \n
\n

8. 运行此命令gcloud auth login并登录 gcloud

   \n
\n

9. 现在再次运行此命令gsutil cors set cors.json gs://your-bucket

   \n
\n

\n

如果您想了解有关 CORS 的更多信息： https: //cloud.google.com/storage/docs/configuring-cors

\n

Answer 3

从上面的链接回答：

如果您已经熟悉 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"],"responseHeader": ["Content-Type"],"method": ["GET", "HEAD"],"maxAgeSeconds": 3600}]' > cors-config.json

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

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

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

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