Firebase Storage and Access-Control-Allow-Origin
FirebaseCorsGoogle Cloud-StorageFirebase StorageFirebase Problem Overview
I'm trying to download files from Firebase Storage through a XMLHttpRequest, but Access-Control-Allow-Origin is not set on the resource, so it's not possible. Is there any way to set this header on the storage server?
(let [xhr (js/XMLHttpRequest.)]
(.open xhr "GET" url)
(aset xhr "responseType" "arraybuffer")
(aset xhr "onload" #(js/console.log "bin" (.-response xhr)))
(.send xhr)))
Chrome error message:
> XMLHttpRequest cannot load > https://firebasestorage.googleapis.com/[EDITED] > No 'Access-Control-Allow-Origin' header is present on the requested > resource. Origin 'http://localhost:3449'; is therefore not allowed > access.
Firebase Solutions
Solution 1 - Firebase
From this post on the firebase-talk group/list:
> 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.
The above is now also included in the Firebase documentation on CORS Configuration
Solution 2 - Firebase
Google Cloud now has an inline editor to make this process even easier. No need to install anything on your local system.
- Open the GCP console and start a cloud terminal session by clicking the
>_
icon button in the top navbar. - Click the pencil icon to open the editor, then create the
cors.json
file. - Run
gsutil cors set cors.json gs://your-bucket
Solution 3 - Firebase
Just want to add to the answer. Just go to your project in google console (console.cloud.google.com/home) and select your project. There open the terminal and just create the cors.json file (touch cors.json
) and then follow the answer and edit this file (vim cors.json
) as suggested by @frank-van-puffelen
This worked for me. Cheers!
Solution 4 - Firebase
another approach to do this is using Google JSON API. step 1 : get access token to use with JSON API To get a token use go to : https://developers.google.com/oauthplayground/ Then search for JSON API or Storage Select required options i.e read ,write , full_access (tick those which are required) Follow the process to get Access Token, which will be valid for an hour. Step 2: Use token to hit google JSON API to update CORS
Sample Curl :
curl -X PATCH \
'https://www.googleapis.com/storage/v1/b/your_bucket_id?fields=cors' \
-H 'Accept: application/json' \
-H 'Accept-Encoding: gzip, deflate' \
-H 'Authorization: Bearer ya29.GltIB3rTqQ2tJgh0cMj1SEa1UgQNJnTMXUjMlMIRGG-mBCbiUO0wqdDuEpnPD6cbkcr1CuLItuhaNCTJYhv2ZKjK7yqyIHNgkCBup-T8Z1B1RiBrCgcgliHOGFDz' \
-H 'Content-Type: application/json' \
-H 'Postman-Token: d19f29ed-2e80-4c34-85ee-c46c9058fac0' \
-H 'cache-control: no-cache' \
-d '{
"location": "us",
"storageClass": "Standard",
"cors": [
{
"maxAgeSeconds": "360000000",
"method": [
"GET",
"HEAD",
"DELETE"
],
"origin": [
"*"
],
"responseHeader":[
"Content-Type"
]
}
]
}'
Solution 5 - Firebase
I am working on a project using firebase storage and the end-user needs a way to download the file they uploaded. I was getting a cors error when the user tried to download the file but after some research, I solved the issue. Here is how I figured it out:
- Download Google Cloud CLI
- Log in using the CLI
- Create cors.json file in the project directory and type the code below.
[ { "origin": ["*"],
"method": ["GET"],
"maxAgeSeconds": 3600
}
]
- Navigate to the directory containing cors.json with the Google Cloud CLI
- In the CLI type:
gsutil cors set cors.json gs://<app_name>.appspot.com