reactjs network error at create error and at XMLHttpRequest.handleError reactjs

Question

I'm creating an application with reactjs as my front end and rails API as my backend. My front end runs on port 3000 and rails runs on 3001. I have the proxy setup to allow for this. I make requests to rails. Here is my post request for signing users in. Note that I'm making an https request because my backend is supposed to be setup to handle this:

axios.post('https://localhost:3001/api/login/authentication', {
  email: email,
  password: password
})
.then(response => {
  this.props.history.push('/Main')
})
.catch(error => {
  console.log(error)
})

When I run this I get the following errors:

Error: Network Error at createError (createError.js:17) at XMLHttpRequest.handleError (xhr.js:87)

Can anyone help me solve this?

Answer 1

Even if the two applications share the same base URL, they are running on different ports, and that's enough for the browser to consider them as two different origins.

In this scenario, you should enable the Cross-Origin Resource Sharing (CORS) mechanism in the backend application.

More about CORS here.