Calls to local host not working with ReactJS/Axios/Express

Question

I am trying to build a full stack app using ReactJS for the frontend and ExpressJS for the backend. I use Axios to make calls from my frontend to my backend. When I make those calls, I get these errors:

Errors in browser console

My express index file:

const express = require('express')
const path = require('path')

var app = express()

const PORT = process.env.PORT || 5000

app.listen(PORT, () => {
  console.log(`Server started on port ${PORT}`)
})

app.use(express.static(path.join(__dirname, "public")))

My get call from React frontend:

componentDidMount() {
  axios.get("http://localhost:5000/servers.json").then((res => {
    this.setState({ servers: res.data })
  }))
}

React server is running on port 3000 and Express server is running port 5000, so there shouldn't be a conflict there...

@ShmiliBreuer the public folder just holds the servers.json file. It loads when I go to localhost:5000/servers.json — Norbu Sonam
– Norbu Sonam, Commented Mar 5, 2020 at 20:04

Brian Mwathi · Accepted Answer · 2020-03-05 21:43:07Z

The reason you are getting the error http://localhost:3000 is not allowed by Access-Control-Allow-Origin is because of the same origin policy, a security feature that's restricting your react script from accessing/communicating your server since they are from different origins. Please note that for documents or scripts to be considered as having the same origin they need to have the same protocol (e.g http / https), hostname (e.g localhost / www.my-server.com) and port. In your case port the react script runs at port 3000 while the express script is running on port 5000, thus the error.

To solve this, you need to enable CORS - Cross Origin Resource Sharing on your server side code. First install the cors dependency using the command

npm install cors

Then update the code in your server to look as follows:

const express = require('express')
const path = require('path')
const cors = require('cors')

const app = express()

app.use(cors())

const PORT = process.env.PORT || 5000

app.listen(PORT, () => {
  console.log(`Server started on port ${PORT}`)
})

app.use(express.static(path.join(__dirname, "public")))

Hopefully this works for you.

Andre · Accepted Answer · 2020-03-05 21:36:25Z

1

This looks like a basic cors issue. Add this cors middleware to your express server. It's the state of the art solution to this problem.

const express = require('express')
const path = require('path')
var cors = require('cors')

var app = express()

app.use(cors())

const PORT = process.env.PORT || 5000

app.listen(PORT, () => {
  console.log(`Server started on port ${PORT}`)
})

app.use(express.static(path.join(__dirname, "public")))

If you are interested about cors in general, check out the wikipedia page.

answered Mar 5, 2020 at 21:36

Andre

4,6855 gold badges24 silver badges34 bronze badges

Collectives™ on Stack Overflow

Calls to local host not working with ReactJS/Axios/Express

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related