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.

since its a get request are you able to hit the api in normal browser ? like copy the url and paste in the browser and try to hit it. check any response you are getting . Also do the api requires any headers or some params to identify this is a valid user — Learner, Feb 15 '19 at 07:36
Possible duplicate of [Firebase Storage and Access-Control-Allow-Origin](https://stackoverflow.com/questions/37760695/firebase-storage-and-access-control-allow-origin) — CumulativeDestruction, Feb 15 '19 at 07:53

Oluwafemi Sule · Answer 1 · 2019-02-15T09:29:31.453

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.

edited Feb 15 '19 at 09:29

answered Feb 15 '19 at 07:47

Oluwafemi Sule

36,144
1
56
81

I installed gsutil but it still does not work for me, same error. I opened the .json file, saved it in my project. Did I do it wrong? – jrz Feb 15 '19 at 08:45
The protocol scheme is necessary as well. – Oluwafemi Sule Feb 15 '19 at 09:29
Which protocol ? – jrz Feb 15 '19 at 09:30
Listed origin should be valid URIs. See the updated sample policy file contents. – Oluwafemi Sule Feb 15 '19 at 09:33
"http://localhost:3000" is a valid address. Did I create the cors.json file in the right place? (cors.json is in my project together with package.json) Also, please take a look at my question, I edited it and added a what I got after gsutil cors set cors.json gs://kollab-music.appspot.com in the command line. – jrz Feb 15 '19 at 09:39
added a screenshot – jrz Feb 15 '19 at 09:53
You seem to be running gsutil in a folder that is different from the location of `cors.json`. You can pass the complete path to the `cors.json` file when you run the command. `gsutil cors set ` – Oluwafemi Sule Feb 15 '19 at 09:58
Dumb mistake. Now I run this command from the location where the "cors.json" is located. But still, it does not work.... The is the url that I copy from Firebase? I am confused. If so, then what is ? – jrz Feb 15 '19 at 10:31

score 0 · Answer 2 · answered Feb 15 '19 at 07:52

0

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.

answered Feb 15 '19 at 07:52

CumulativeDestruction

86
7

score -1 · Answer 3 · answered Feb 15 '19 at 07:44

-1

Install CORS chrome extension and enable it, this adds Access-Control-Allow-Origin, Access-Control-Allow-Methods and Access-Control-Allow-Headers headers for CORS.

answered Feb 15 '19 at 07:44

Vaibhav Chauhan

350
2
8

React axios.get - Firebase

3 Answers3