CODEWITHSUNDEEP
firebasecorsfirebase-storage
PR7
PR7

Reputation: 1894

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

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.

Upvotes: 3

Views: 6407

Answers (4)

vamsee krishna
vamsee krishna

Reputation: 41

the following worked for me!

cors config :
[
    {
      "origin": ["http://localhost:3000"],
      "method": ["GET", "POST", "PUT", "DELETE"],
      "responseHeader": ["Content-Type", "Authorization","Access-Control-Allow-Origin"],
      "maxAgeSeconds": 3600
    }
]

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

Upvotes: 0

Jriffs
Jriffs

Reputation: 417

For those who have tried this answer and are getting this error:

command does not support "file://" URL's

All you need to do is copy the cors.json file, go to the location on your PC where the 'Cloud sdk' tool is (in my case it is C:\Users\Mothers Child\AppData\Local\Google\Cloud SDK) and paste the file directly in that folder, then run 'gsutil cors set cors.json gs://your-bucket-name'. it should work this time.

Upvotes: 0

sideshowbarker
sideshowbarker

Reputation: 87984

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

Upvotes: 6

Fortun
Fortun

Reputation: 67

Simply run the command

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

from the directory that contains the cors.json file.

Upvotes: -1

Related Questions