CORS Configuration To download data directly in the browser, you must configure your Cloud Storage bucket for cross-origin access (CORS). This can be done with the gsutil command line tool, which you can install from here. Run gsutil cors set cors. json gs://<your-cloud-storage-bucket> to deploy these restrictions.
Since the header is currently set to allow access only from https://yoursite.com , the browser will block access to the resource and you will see an error in your console. Now, to fix this, change the headers to this: res. setHeader("Access-Control-Allow-Origin", "*");
Access-Control-Allow-Origin: * is totally safe to add to any resource, unless that resource contains private data protected by something other than standard credentials. Standard credentials are cookies, HTTP basic auth, and TLS client certificates.
Once you have a reference, you can download files from Cloud Storage by calling the getBytes() or getStream() . If you prefer to download the file with another library, you can get a download URL with getDownloadUrl() .
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 forgsutil
are available at https://cloud.google.com/storage/docs/gsutil_install. Once you've installedgsutil
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.
Google Cloud now has an inline editor to make this process even easier. No need to install anything on your local system.
>_
icon button in the top navbar. cors.json
file. gsutil cors set cors.json gs://your-bucket
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!
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"
]
}
]
}'
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With