Axios can not GET json data from another localhost

Question

I'm creating an application, the front end in React JC and I have a basic REST api made with Node JS. When I try fetch data from localhost:3001/user/:id for example on postman - everything works 100%.

But when I try to fetch it on my front end in React (the react app is hosted on localhost:3000/), it delivers the following error:

"Failed to load localhost:3001/user/5b21a5d7588b40be612798d4: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https."

The relevant code where I'm trying to fetch the data on my front end (with Axios is here):

componentDidMount () {
    axios.get("localhost:3001/user/5b21a5d7588b40be612798d4").then(response => {
        console.log(response);
      })

  }

Answer 1

You need a browser plugin that allows cross origin resource sharing. You'll need to turn it on, and then it should work.

Keep in mind, a lot of sites disable their services when you have it on for security reasons, like YouTube. So only keep it on while working on your project.

Answer 2

You have to specify the protocol at the begining of the URL

componentDidMount () {
    axios.get("http://localhost:3001/user/5b21a5d7588b40be612798d4").then(response => {
        console.log(response);
      })
  }