Firebase 存储和 Access-Control-Allow-Origin

Question

Firebase 存储和 Access-Control-Allow-Origin

firebasecorsgoogle-cloud-storagefirebase-storage

192

我正在尝试通过XMLHttpRequest从Firebase Storage下载文件，但是资源没有设置Access-Control-Allow-Origin，因此无法完成。有没有办法在存储服务器上设置此标头？

  (let [xhr (js/XMLHttpRequest.)]
    (.open xhr "GET" url)
    (aset xhr "responseType" "arraybuffer")
    (aset xhr "onload" #(js/console.log "bin" (.-response xhr)))
    (.send xhr)))

Chrome错误信息：

XMLHttpRequest无法加载 https://firebasestorage.googleapis.com/[EDITED]，请求的资源上没有'Access-Control-Allow-Origin'头。因此，不允许从源“http://localhost:3449”访问。

- Blacksad

5

评论权限不足，但上述方法仍然是正确的方法。我只是想分享有关此问题的官方 Firebase 文档：https://firebase.google.com/docs/storage/web/download-files#cors_configuration - Andrew McOlash

youtube.com/watch?v=tvCIEsk4Uas&t=34s 一段解释性视频。 - Anupam Agnihotri

5个回答

262

现在，Google Cloud具有内联编辑器，使这个过程变得更加容易。无需在本地系统上安装任何东西。

打开GCP控制台，并通过单击顶部导航栏中的>_图标按钮启动云终端会话。或在搜索栏中搜索“cloud shell editor”。
单击铅笔图标打开编辑器，然后创建cors.json文件。
运行gsutil cors set cors.json gs://your-bucket

- JeffD23

10

这是位于右上方导航栏的图标，看起来像>_。 - JeffD23

1

有没有一种简单的方法可以首先拉取现有的CORS配置，以便在必要时进行还原？ - David

3

做到了！谢谢。我必须说，如果它是从Firebase存储本身控制的话，这可能会简单得多，也许是在规则下？！#google #firebase 这里有一个增强用户体验的机会。 - Rodrigo Rubio

1

@NickCarducci 你可能是对的，我也很喜欢匿名功能，但它只能从内存中存储1000万个数据，这让我有些担心。例如，当你为电视广告制作一个Web应用程序时，没有人需要登录或注册，这可能会很危险。 - Rodrigo Rubio

4

需要等待一段时间吗？我将源设置为“*”，但仍然出现以下错误：无法访问'https://firebasestorage.googleapis.com/...'，因为CORS策略已阻止来自'https://....stackblitz.io'来源的访问，您能帮忙翻译吗？ - Weilies

显示剩余7条评论

22

只是想要补充一下。只需转到您在 Google 控制台中的项目 (console.cloud.google.com/home)，并选择您的项目。在那里打开终端，并创建 cors.json 文件 (touch cors.json)，然后按照 @frank-van-puffelen 的建议编辑此文件 (vim cors.json)，如答案所示。

这对我有用。干杯！

- Aakash

1

网页控制台console.cloud.google.com/home给了我一个错误，但在Google Cloud SDK Shell中却可以正常工作。 - FiringBlanks

4

打开终端的方法是什么？我在链接上没有看到“打开终端”的按钮。 - fortesl

2

确保您在 cloud 子域上，而不是 firebase 子域上（“console.cloud.google.com/home”），并查找右上角的 >_ 图标按钮。 - Chris Villa

10

我正在使用Firebase Storage进行项目开发，最终用户需要一种方式来下载他们上传的文件。当用户尝试下载文件时，我遇到了一个cors错误，但经过一些研究，我解决了这个问题。以下是我的解决方法：

下载Google Cloud CLI。
使用CLI登录。
在项目目录中创建cors.json文件并键入下面的代码。

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

使用 Google Cloud CLI 导航到包含 cors.json 的目录
在 CLI 中输入：gsutil cors set cors.json gs://.appspot.com

- Alex Joslin

这是 Flutter Web 的正确答案。 - Noryn Basaya

3

另一种方法是使用Google JSON API。步骤1：获取用于JSON API的访问令牌要获取令牌，请转到：https://developers.google.com/oauthplayground/ 然后搜索JSON API或Storage 选择所需选项，即读取、写入、完全访问（选中所需选项）按照流程获取访问令牌，有效期为一小时。步骤2：使用令牌命中Google JSON API以更新CORS

示例Curl：

    curl -X PATCH \
  'https://www.googleapis.com/storage/v1/b/your_bucket_id?fields=cors' \
  -H 'Accept: application/json' \
  -H 'Accept-Encoding: gzip, deflate' \
  -H 'Authorization: Bearer ya29.GltIB3rTqQ2tJgh0cMj1SEa1UgQNJnTMXUjMlMIRGG-mBCbiUO0wqdDuEpnPD6cbkcr1CuLItuhaNCTJYhv2ZKjK7yqyIHNgkCBup-T8Z1B1RiBrCgcgliHOGFDz' \
  -H 'Content-Type: application/json' \
  -H 'Postman-Token: d19f29ed-2e80-4c34-85ee-c46c9058fac0' \
  -H 'cache-control: no-cache' \
  -d '{
  "location": "us",
  "storageClass": "Standard",
  "cors": [
      {
          "maxAgeSeconds": "360000000",
          "method": [
             "GET",
             "HEAD",
             "DELETE"
          ],
          "origin": [
             "*"
          ],
          "responseHeader":[
            "Content-Type"
         ]
      }
  ]
}'

- nimesh makwana

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Frank van Puffelen · Accepted Answer

以下内容来自于firebase-talk群组/列表中的帖子:

使用gsutil命令行工具是配置CORS的最简单方法。您可以在https://cloud.google.com/storage/docs/gsutil_install获取gsutil的安装说明。安装并通过身份验证后，您可以使用它来配置CORS。

例如，如果您只想允许从您的自定义域名下载对象，请将此数据放入名为cors.json的文件中（将"https://example.com"替换为您的域名）:

[
  {
    "origin": ["https://example.com"],
    "method": ["GET"],
    "maxAgeSeconds": 3600
  }
]

然后运行以下命令（将"exampleproject.appspot.com"替换为您的Bucket名称）：

gsutil cors set cors.json gs://exampleproject.appspot.com

并且你应该已经准备好了。如果您需要更复杂的CORS配置，请查看文档：https://cloud.google.com/storage/docs/cross-origin#Configuring-CORS-on-a-Bucket。上述内容现在也包含在Firebase文档的CORS配置中。