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

Posted 2023-02-27

【中文标题】Firebase 存储和访问控制允许来源

【英文标题】：Firebase Storage and Access-Control-Allow-Origin

【发布时间】：2016-10-12 03:45:52

【问题描述】：

我正在尝试通过 XMLHttpRequest 从 Firebase 存储下载文件，但未在资源上设置 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” 访问。

【问题讨论】：

没有足够的代表发表评论，但上述方式仍然是正确的方式。只是想分享关于这个的官方 firebase 文档：firebase.google.com/docs/storage/web/…

【参考方案1】：

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

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

【讨论】：

卡在第 1 步。请解释一下“并启动云终端会话”我打开控制台并没有看到任何按钮，或者链接到“启动云终端会话”

这是右上角导航中的图标，看起来像>_

是否有一种直接的方法可以在必要时先提取现有的 cors 配置以进行还原？

成功了！谢谢。我必须说，如果它是从 Firebase 存储本身控制的，这可能会简单得多，也许是在规则下？！ #google #firebase 有机会提升用户体验。

@NickCarducci 你可能是对的，我真的很喜欢匿名工具，尽管它担心它的内存硬限制是 1000 万。如果您有一个用于电视广告系列的网络应用程序，例如预计没有人登录或注册的情况下，这可能会很危险。

【参考方案2】：

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

【参考方案3】：

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

这对我有用。干杯！

【讨论】：

console.cloud.google.com/home 上的网络控制台给了我一个错误，但在 Google Cloud SDK Shell 上运行良好。

...打开终端，然后...您如何打开终端？我在链接上没有看到“打开终端”按钮

确保您位于 cloud 子域，而不是 firebase 子域（“console.cloud.google.com/home”）并在右上角。

【参考方案4】：

来自post on the firebase-talk group/list：

为 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 的文档。

【讨论】：

有没有办法允许所有类似于 Access-Control-Allow-Origin: * 的来源？

如何找到我的 Firebase 存储桶的确切名称？

@user1311069 只需使用"origin": ["*"], 而不是"origin": ["https://example.com"],

Firebase 确实需要找到一种用户友好的方式来执行此操作。在实际的 Firebase 数据库上设置权限并没有那么令人沮丧，设置 S3 存储桶权限也没有。目前对 S3 的强烈偏好。

如果您不想安装该实用程序，一个方便的方法是转到console.cloud.google.com/home，然后单击右上角的“激活 Google Cloud Shell”。这将打开一个已安装 gsutil 的 shell，并可以访问您的 firebase 存储项目。 （在shell中我使用pico创建了一个json，然后像上面提到的那样做了gsutil cors set myjson.json gs://projectname.appspot.com）