React axios.get - Firebase

Question

I uploaded some mp3 files to my Storage in Firebase.

I am using axios in order to get the relevant files that are stored in the Storage.

Inside "rules" tab I changed the permissions to:

      allow read, write, request;

However, I still get an error when I start up my website:

Access to XMLHttpRequest at 
'gs://******.appspot.com/****/****' from origin 'http://localhost:3000' 
has been blocked by CORS policy: Cross origin requests are only 
supported for protocol schemes: http, data, chrome, chrome-extension, 
https.

This is my code:

constructor(props) {
    super(props);

    this.state = {
        allRecords: [],
}

componentDidMount () {
  axios.get('gs://******.appspot.com/****/****')
      .then(response => {
        this.setState({allRecords: response.data})
        console.log(response.data)
      })
      .catch(error => alert("An error has occurred, please try again and check your internet connection."))
    }

Am I doing something wrong? I am totally sure that the address to the get method is fine (I just copied it from Firebase).

---

Edit:

I run the command

gsutil cors set cors.json gs://****.appspot.com :

And yet I get the same error when I load my website.

Answer 1

You need to update the CORS policy on the Cloud Storage bucket to download files directly in the browser that way. ¹

You can use the gsutil command line tool for that. A typical policy file for your scenario can contain these directives:

[
  {
    "origin": ["http://localhost:3000"],
    "method": ["GET"],
    "maxAgeSeconds": 3600
  }
]

You can update the origin list with other hosts that you like to access the bucket.

Answer 2

Using an extension is not an ideal solution. This sounds like CORS is not configured on the server, I'm not entirely sure, but check out this stackoverflow answer , Should refer you to this group .

Answer 3

安装CORS chrome扩展名并启用它，这将为CORS添加Access-Control-Allow-Origin，Access-Control-Allow-Methods和Access-Control-Allow-Header标头。