Firebase Storage CORS with custom domain

[Mitch Grasso]

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].firebaseapp.com?

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].firebaseapp.com, 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).

thanks,

Mitch

[Mitch Grasso]

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]

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

- Spencer

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

[Spencer Phippen]

Hey Mitch,

Thanks for the feedback! We'll take that into account when planning new Storage features.

- Spencer

[Lalit Rane]

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 https://firebasestorage.googleapis.com/v0/b/mylearnapp.appspot.com/o?name=Learn%2FCourse%2F7%2FLesson%2F10%2FResource%2F12%2FVideo%2Fsolar-system.mp4&upload_id=AEnB2UrCRz0Om-5SUsH_dMTc-DZDw45wSHziGzD0yKF6NE2N1hi9LLae798U5yOHYVnJMtXcgZwZHWB6qINyahVr00XNzMfoNwC2dBwD8EefBLrBqdZ-NVI&upload_protocol=resumable. (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.');
            console.log(snapshot.metadata);
            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]

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.

Thanks,

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 https://groups.google.com/d/topic/firebase-talk/oSPWMS7MSNA/unsubscribe.
To unsubscribe from this group and all its topics, send an email to firebase-talk+unsubscribe@googlegroups.com.
To post to this group, send email to fireba...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/firebase-talk/116792a5-d4c7-4663-b2f9-6cf2cdf6c824%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.