Firebase Storage and Access-Control-Allow-Origin

corsfirebasefirebase-storagegoogle-cloud-storage

I'm trying to download files from Firebase Storage through a XMLHttpRequest, but Access-Control-Allow-Origin is not set on the resource, so it's not possible. Is there any way to set this header on the storage server?

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

Chrome error message:

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.

Best Solution

From this 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.