logo标签列表

Flutter Firebase 存储 CORS 问题

firebaseflutter-web
22

我正在使用 Firebase 存储的免费计划。一切工作正常，但在我的 Flutter Web 上图像无法加载。

我遇到了以下错误。

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
    }
]
6个回答
40
3
太棒了！你救了我的命。谢谢！ - Kabuki
在我的情况下，我无法访问Google Cloud Storage存储桶的storage.buckets.get权限，无论是使用电子邮件帐户还是服务帐户...有什么解决办法吗？ - Saif Ur Rehman Saif
1
感谢您提供的好信息！Arigatogozaimasu！ - takinok
精确的答案，谢谢！ - MBK
你解决了我的困扰，即使是ChatGPT也无法帮助我，我和它聊了大约7个小时。 - public static void Main
对于懒惰的人来说，另一个回答者将这个已经不存在的页面的内容放在了这里：https://dev59.com/s1EG5IYBdhLWcg3wct_2#67975184。 - Gigi Bayte 2
27

上面链接中的答案如下：

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

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

Activate Google Cloud Shell

在窗口底部将显示一个Shell终端，其中gcloud和gsutil已经可用。执行下面显示的命令。它会创建一个JSON文件，用于设置CORS配置文件到您的存储桶。此配置将允许每个域使用浏览器中的XHR请求访问您的存储桶：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，以更新存储桶的CORS设置：gsutil cors set cors-config.json gs://YOUR_BUCKET_NAME。
要检查是否一切正常，请使用以下命令获取存储桶的CORS设置：gsutil cors get gs://YOUR_BUCKET_NAME。
您可以在Firebase控制台的Storage面板中找到存储桶ID：
Firebase控制台的Storage面板 这是以gs://开头的值。 enter image description here
8

我曾经遇到过类似的问题，通常都需要花费几个小时才能解决，但解决方案通常很简单易行。

当你运行这个命令 flutter run -d chrome --web-renderer canvaskit --no-sound-null-safety 时，应用程序可以运行，并且一切都很完美，但是不幸的是网络图片无法加载。当你检查应用程序并查看控制台时，你会看到这个美丽的错误：

enter image description here

(Blocked by CORS policy) : No ‘Access-Control: Allow-Origin’ header is present on the requested resource.

CORS 是什么？

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

现在如何解决 CORS 问题？以及如何从任何其他域或 Firebase 存储中显示图像。答案非常简单，请按照以下步骤操作：

  1. 打开GCP 控制台，你会看到下面的屏幕

enter image description here

  1. 现在选择你的项目并点击仪表盘按钮。

enter image description here

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

enter image description here

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

enter image description here

  1. 现在单击 3 (...) 点，并创建一个名为 cors.json 的新文件，如下图所示

enter image description here

  1. 复制并粘贴以下代码：

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

在这段代码中，你会注意到我设置了来源为*，这意味着每个网站都可以显示你的图片。但你也可以插入你的网站域名来限制访问。

  1. 现在运行命令：gsutil cors set cors.json gs://your-bucket。当你运行gsutil cors set cors.json gs://your-bucket时，你会得到一个美丽的错误（‘gsutil ServiceException: 401 Anonymous caller does not have storage.objects.list access to bucket’），这意味着你需要先登录。

  2. 运行此命令：gcloud auth login并登录到gcloud。

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

如果你想了解更多关于CORS的内容，请访问https://cloud.google.com/storage/docs/configuring-cors

1

官方Firebase Storage答案可以在这里找到。如果答案有变化，这可能很有用。截至2022年4月，它基本上与Feroz的答案相同。

1
如果有人在安装gsutil时遇到问题，那么它将无法与最新的Python 3.10版本兼容。您需要安装一个先前的版本，其版本号以3.7开头。
例如： 下载Python 3.7.9
0
我通过执行链接解决方案中的两个命令来实施了这个解决方案。
echo '[{"origin": ["*"],"responseHeader": ["Content-Type"],"method": ["GET", "HEAD"],"maxAgeSeconds": 3600}]' > cors-config.json

这创建了json配置文件。接下来，我需要通过发出第二个命令并替换我的存储桶的名称来更新特定存储桶的配置...
gsutil cors set cors-config.json gs://YOUR_BUCKET_NAME

完成这两个步骤后，我就能够访问并下载文件了。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接