Firebase Storage CORS with custom domain

Skip to first unread message

Mitch Grasso

May 24, 2016, 12:48:08 PM5/24/16
to Firebase Google Group
When using a custom domain, how can I set the access-control-allow-origin for files served from firebase storage to include my custom domain and not just [app]

I have a web application that is attempting to access canvas data for images stored in firebase storage. If I load the app from [app], it all works fine but when I load from my custom domain, I either get a CORS error when loading images (if i set img.crossOrign = "Anonymous") or a tainted canvas error (if i don't).


Mitch Grasso

May 24, 2016, 2:22:02 PM5/24/16
to Firebase Google Group
FWIW, I was able to add the appropriate CORS headers using gsutil cors on the storage bucket but it'd be nice if firebase handled this configuration automatically.

Spencer Phippen

May 24, 2016, 3:01:08 PM5/24/16
to Firebase Google Group
Hey Mitch,

The easiest way to configure your data for CORS is with the gsutil command line tool.
The installation instructions for gsutil are available at
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 "" with your domain):
    "origin": [""],
    "method": ["GET"],
    "maxAgeSeconds": 3600

Then, run this command (replacing "" with the name of your bucket):
gsutil cors set cors.json gs://

and you should be set.

If you need a more complicated CORS configuration, check out the docs at

- Spencer

On Tuesday, May 24, 2016 at 9:48:08 AM UTC-7, Mitch Grasso wrote:

Spencer Phippen

May 24, 2016, 5:37:13 PM5/24/16
to Firebase Google Group
Hey Mitch,
Thanks for the feedback! We'll take that into account when planning new Storage features.
- Spencer

Lalit Rane

Sep 21, 2016, 10:22:15 AM9/21/16
to Firebase Google Group
Hi Spencer,

   I am facing similar problem while uploading file to firebase storage. I am able to upload Image files to the firebase storage. But uploading the mp4 files gives problems. Am I missing some configuration? Please help. I am getting below error.

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at (Reason: CORS header 'Access-Control-Allow-Origin' missing).

Code Snippet Below: (Same code used for Image and Video Files).

baseStorageRef.child(objectName).put(inputFile, fileMetaData).then(function(snapshot) {
            console.log('Uploaded', snapshot.totalBytes, 'bytes.');
            var mediaUrl = snapshot.metadata.downloadURLs[0];
            console.log('File available at', mediaUrl);
            alert('File available at ', mediaUrl);
          }).catch(function(error) {
            // [START onfailure]
            console.error('uploadFile_Firebase: Upload failed:', error);
            alert('File Upload Failed ' + error) ;
            // [END onfailure]
          // [END oncomplete]

Spencer Phippen

Sep 21, 2016, 2:54:00 PM9/21/16
Hey Lalit,

I've been trying to reproduce the error you're getting but I can't get my uploads to fail :(
I tried with and without the CORS configuration on my bucket that I talked about above.

Could you provide a full, minimal repro, what version of firebase and which browser (and version) you're using, and whether you've done any CORS configuration on your bucket like I talked about above?
Network logs captured from your browser can be helpful for debugging a problem like this as well, so we know exactly what our server is sending.

Spencer P

You received this message because you are subscribed to a topic in the Google Groups "Firebase Google Group" group.
To unsubscribe from this topic, visit
To unsubscribe from this group and all its topics, send an email to
To post to this group, send email to
To view this discussion on the web visit

For more options, visit

Reply all
Reply to author
0 new messages