FlutterFirebase存储CORS问题

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

回答

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

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

  • Bravo! you saved my life. Thanks !

回答

从上面的链接回答:

如果您已经熟悉 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://.开头的值。


以上是FlutterFirebase存储CORS问题的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>