firebasecorsfirebase-storage

CORS on firebase storage


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?


Solution

  • 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.