Configuring CORS on a Firebase Google Cloud Storage Bucket

Question

I'm trying to upload a file to a Firebase Storage bucket.

I am unable to do so because of a cross-origin request error.

XMLHttpRequest cannot load gs://myappkhh.appspot.com. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

I've been told that the way to handle this is the command line tool gsutil (according to https://cloud.google.com/storage/docs/cross-origin)

How do I use this in my existing firebase project? Where do I need to run this command?

Answer 1

Login to your google cloud console: https://console.cloud.google.com/home and Click on "Activate Google Cloud Shell" in the upper right corner.

At the bottom of your window, a shell terminal will be shown, where gcloud and gsutil are already available. Execute the command shown below. It creates a json-file which is needed to setup the cors-configuration for your bucket. This configuration will allow every domain to access your bucket using XHR-Requests in the browser:

echo '[{"origin": ["*"],"responseHeader": ["Content-Type"],"method": ["GET", "HEAD"],"maxAgeSeconds": 3600}]' > cors-config.json

If you want to restrict the access one or more specific domains, add their URL to the array, e.g.:

echo '[{"origin": ["https://yourdomain.com"],"responseHeader": ["Content-Type"],"method": ["GET", "HEAD"],"maxAgeSeconds": 3600}]' > cors-config.json

Replace YOUR_BUCKET_NAME with your actual bucketname in the following command to update the cors-settings from your bucket

gsutil cors set cors-config.json gs://YOUR_BUCKET_NAME

To check if everything worked as expected, you can get the cors-settings of a bucket with the following command:

gsutil cors get gs://YOUR_BUCKET_NAME

Reference : https://developer.bitmovin.com/hc/en-us/articles/360000059353-How-do-I-set-up-CORS-for-my-Google-Cloud-Storage-Bucket-