Firebase 存储和访问控制允许来源

问题描述 投票:0回答:5

我尝试通过 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/[编辑] 请求中不存在“Access-Control-Allow-Origin”标头 资源。因此,不允许使用 'http://localhost:3449' 访问。

firebase cors google-cloud-storage firebase-storage
5个回答
322
投票

来自这个firebase-talk组/列表上的帖子

为 CORS 配置数据的最简单方法是使用

gsutil
命令行工具。
gsutil
的安装说明可在 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"
替换为您的存储桶的名称):

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

你应该已经准备好了。

如果您需要更复杂的 CORS 配置,请查看文档 https://cloud.google.com/storage/docs/cross-origin#Configuring-CORS-on-a-Bucket

以上内容现在也包含在有关 CORS 配置的 Firebase 文档中


263
投票

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

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

cors.json的内容

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

22
投票

只是想添加答案。只需转到 Google 控制台 (console.cloud.google.com/home) 中的项目并选择您的项目即可。打开终端并创建 cors.json 文件 (

touch cors.json
),然后按照 @frank-van-puffelen
 的建议,按照答案并编辑此文件 (
vim cors.json

)

这对我有用。干杯!


11
投票

我正在开发一个使用 firebase 存储的项目,最终用户需要一种方法来下载他们上传的文件。当用户尝试下载文件时,我遇到了 cors 错误,但经过一些研究,我解决了这个问题。 这是我的想法:

  1. 下载 Google Cloud CLI
  2. 使用 CLI 登录
  3. 在项目目录中创建 cors.json 文件并输入以下代码。
[
  {
    "origin": ["*"],
    "method": ["GET"],
    "maxAgeSeconds": 3600
  }
]
  1. 使用 Google Cloud CLI 导航到包含 cors.json 的目录
  2. 在 CLI 中输入:
    gsutil cors set cors.json gs://<app_name>.appspot.com

3
投票

另一种方法是使用 Google JSON API。 第 1 步:获取用于 JSON API 的访问令牌 要获取令牌,请访问:https://developers.google.com/oauthplayground/ 然后搜索 JSON API 或 Storage 选择所需选项,即 read 、write 、 full_access (勾选所需选项) 按照流程获取 Access Token,该令牌的有效期为一小时。 第 2 步:使用 token 访问 google JSON API 来更新 CORS

卷曲示例:

    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"
         ]
      }
  ]
}'
© www.soinside.com 2019 - 2024. All rights reserved.