CORS on firebase storage

Question

I'm gettin the normal cors error on my firebase storage when I do a get call on an html file:

Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers in preflight response.

I'm using axios for the call:

axios.get('https://firebasestorage.googleapis.com/v0/b/xxxxx-xxxxx.appspot.com/o/files%2Fsigning%2F148%2F459.html?alt=media&token=f3be2ef2-a598-4c30-a77b-8077e8b1f7bc',
{
   headers: {'Access-Control-Allow-Origin': '*',}
)

I have the access set to public:

service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write;
    }
  }
}

This same setup works fine when I load images but it's giving me the error for the stored html file. Any thoughts on how to fix it?

Answer 1

Firebase is using the same storage infrastructure as google cloud and even though there is no firebase method to set the cors rules, you can use gc set up. First you need to install google cloud sdk:

curl https://sdk.cloud.google.com | bash

Restart your shell:

exec -l $SHELL

Initialize gcloud. This will ask you to select your account and authenticate.

gcloud init

Then create a json file with the following content

[
    {
      "origin": ["http://example.appspot.com"],
      "responseHeader": ["Content-Type"],
      "method": ["GET", "HEAD", "DELETE"],
      "maxAgeSeconds": 3600
    }
]

And run this with your firebase storage gc: endpoint

gsutil cors set yourFile.json gs://yourProject

That should fixe the problem for you as well.