Firebase Storage and Access-Control-Allow-Origin

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.

Solution 1:

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.

The above is now also included in the Firebase documentation on CORS Configuration

Solution 2:

Google Cloud now has an inline editor to make this process even easier. No need to install anything on your local system.

1. Open the GCP console and start a cloud terminal session by clicking the >_ icon button in the top navbar.
2. Click the pencil icon to open the editor, then create the cors.json file.
3. Run gsutil cors set cors.json gs://your-bucket

Solution 3:

Just want to add to the answer. Just go to your project in google console (console.cloud.google.com/home) and select your project. There open the terminal and just create the cors.json file (touch cors.json) and then follow the answer and edit this file (vim cors.json) as suggested by @frank-van-puffelen

This worked for me. Cheers!

Solution 4:

another approach to do this is using Google JSON API. step 1 : get access token to use with JSON API To get a token use go to : https://developers.google.com/oauthplayground/ Then search for JSON API or Storage Select required options i.e read ,write , full_access (tick those which are required) Follow the process to get Access Token, which will be valid for an hour. Step 2: Use token to hit google JSON API to update CORS

Sample Curl :

    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"
         ]
      }
  ]
}'