CODEWITHSUNDEEP
node.jsjsonreactjsexpressaxios
Norbu Sonam
Norbu Sonam

Reputation: 107

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

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

Upvotes: 1

Views: 2445

Answers (2)

Brian Mwathi
Brian Mwathi

Reputation: 36

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.

Upvotes: 1

Andre
Andre

Reputation: 4635

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.

Upvotes: 1

Related Questions