Firebase 存储和 Access-Control-Allow-Origin

Question

我正在尝试通过 XMLHttpRequest 从 Firebase 存储下载文件，但是 Access-Control-Allow-Origin 没有在资源上设置，所以这是不可能的。有没有办法在存储服务器上设置这个header？

  (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 cannot load https://firebasestorage.googleapis.com/[EDITED] No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3449' is therefore not allowed access.

Answer 1

从这个post on the firebase-talk group/list:

The easiest way to configure your data for CORS is with the gsutil command line tool. The installation instructions for gsutil are available at https://cloud.google.com/storage/docs/gsutil_install. Once you've installed gsutil and authenticated with it, you can use it to configure CORS.

For example, if you just want to allow object downloads from your custom domain, put this data in a file named cors.json (replacing "https://example.com" with your domain):

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

Then, run this command (replacing "exampleproject.appspot.com" with the name of your bucket):

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

and you should be set.

If you need a more complicated CORS configuration, check out the docs at https://cloud.google.com/storage/docs/cross-origin#Configuring-CORS-on-a-Bucket.

以上内容现在也包含在 CORS Configuration

上的 Firebase 文档中

Answer 2

只是想补充一下答案。只需在 google 控制台 (console.cloud.google.com/home) 和 select 中转到您的项目。打开终端并创建 cors.json 文件（touch cors.json），然后按照@frank-van-puffelen[=12= 的建议按照答案编辑此文件（vim cors.json） ]

这对我有用。干杯！

Answer 3

另一种方法是使用 Google JSON API。第 1 步：获取访问令牌以用于 JSON API 要获得令牌，请访问：https://developers.google.com/oauthplayground/ 然后搜索 JSON API 或存储 Select 必需的选项，即 read ，write ， full_access （勾选那些需要的）按照流程获取Access Token，有效期为一个小时。第二步：使用token命中googleJSONAPI更新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"
         ]
      }
  ]
}'

Answer 4

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

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

Answer 5

我正在开发一个使用 firebase 存储的项目，end-user 需要一种方法来下载他们上传的文件。当用户尝试下载文件时，我遇到了 cors 错误，但经过一番研究后，我解决了这个问题。这是我的计算方法：

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

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

使用 Google Cloud CLI
在 CLI 中输入：gsutil cors set cors.json gs://<app_name>.appspot.com

Firebase 存储和 Access-Control-Allow-Origin

Firebase Storage and Access-Control-Allow-Origin

cors

google-cloud-storage

firebase

firebase-storage