在 Firebase Google 云存储桶上配置 CORS

Question

我正在尝试将文件上传到 Firebase 存储桶。

由于跨源请求错误，我无法这样做。

XMLHttpRequest cannot load gs://myappkhh.appspot.com. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

有人告诉我处理这个问题的方法是命令行工具 gsutil （根据 https://cloud.google.com/storage/docs/cross-origin）

如何在我现有的 firebase 项目中使用它？我在哪里需要运行这个命令？

Answer 1

登录到您的 google 云控制台：https://console.cloud.google.com/home 并单击右上角的 "Activate Google Cloud Shell"。

在 window 的底部，将显示一个 shell 终端，其中 gcloud 和 gsutil 已经可用。执行如下所示的命令。它会创建一个 json-file 来为您的存储桶设置 cors-configuration。此配置将允许每个域在浏览器中使用 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-settings

gsutil cors set cors-config.json gs://YOUR_BUCKET_NAME

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

gsutil cors get gs://YOUR_BUCKET_NAME

参考：https://developer.bitmovin.com/hc/en-us/articles/360000059353-How-do-I-set-up-CORS-for-my-Google-Cloud-Storage-Bucket-

在 Firebase Google 云存储桶上配置 CORS

Configuring CORS on a Firebase Google Cloud Storage Bucket

google-cloud-storage

firebase

firebase-storage