gs://<your-cloud-storage-bucket> has no CORS configuration

Question

I am trying to download file from my firebase storage on button click event but it is giving me 'Access-Control-Allow-Origin' error.

https://firebase.google.com/docs/storage/web/download-files

As per above link I am trying to configure CORS. I installed the gsutil command line tool. But I am unable to find cors.json file where I need to copy this code

[
 {
 "origin": ["*"],
 "method": ["GET"],
 "maxAgeSeconds": 3600
 }
]

I then used command gsutil cors get gs://<your-cloud-storage-bucket> which returns gsutil cors get gs://<your-cloud-storage-bucket>/ has no CORS configuration.

Do I need to create CORS configuration file for my storage bucket first ?

Below is my button click method, incase the error is in the code.

downloadAttachment(fileName) {
var uid = AuthService.uid;
let storageRef = firebase.storage().ref().child('assignments/' + uid + '/' + fileName);
storageRef.getDownloadURL().then(url => {
  console.log(url);
  var xhr = new XMLHttpRequest();
  xhr.responseType = 'blob';
  xhr.onload = function (event) {
    var blob = xhr.response;
  };
  xhr.open('GET', url);
  xhr.send();
});
}

Error :

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access.

Thanks.

Answer 1

Yes, create a file named anything you want—call it cors.json if you want—and put your preferred CORS config settings in it, and then run gsutil on it like this:

gsutil cors set cors.json gs://<your-cloud-storage-bucket>/

That will upload those CORS config settings to your bucket. And after that you can retrieve the current settings at any time using gsutil cors get gs://<your-cloud-storage-bucket>.