Firebase存储和访问控制允许原点

时间:2016-06-11 06:29:03

标签: firebase cors google-cloud-storage firebase-storage

我正在尝试通过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”   访问。

6 个答案:

答案 0 :(得分:94)

从此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上的文档。

答案 1 :(得分:9)

只想添加到答案中。只需在Google控制台(console.cloud.google.com/home)中转到您的项目,然后选择您的项目即可。在那里打开终端,仅创建cors.json文件(touch cors.json),然后按照答案回答并按照@ frank-van-puffelen的建议编辑此文件(vim cors.json

这对我有用。干杯!

答案 2 :(得分:5)

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

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

enter image description here

答案 3 :(得分:0)

另一种方法是使用Google JSON API。 第1步:获取用于JSON API的访问令牌   要使用令牌,请访问:https://developers.google.com/oauthplayground/   然后搜索JSON API或存储   选择所需的选项,即read,write,full_access(勾选所需的选项)   按照此过程获取访问令牌,该令牌将在一个小时内有效。 第2步:使用令牌访问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"
         ]
      }
  ]
}'

答案 4 :(得分:0)

我想为那些迫切需要解决方案的人添加一些东西,就像我尝试了所有这些但没有解决问题之后一样。我在网上找到了一篇很棒的文章,提供了3种解决方案,第一个对我有用。.谷歌浏览器插件..是的!..

moesif CORS extension  确保安装后将其打开

答案 5 :(得分:0)

要访问应用了CORS标头的任何资源,可以使用我自己在Golang中创建的一个小项目-https://proxify-cors.herokuapp.com/