Why can't I call localhost localhost:5000 from localhost:3000 using fetch in react?-CodePudding

My react application running on localhost:3000 and in that I am making a GET request in my code using fetch to localhost:5000/users.

const [users, setUsers] = useState([]);

useEffect(() => {
  fetch('http://localhost:5000/users')
    .then(res => res.json())
    .then(data => setUsers(data))
}, []);

But I'm getting an error called

Access to fetch at 'http://localhost:5000/users' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

CodePudding user response：

It is a much discussed problem. Follow the steps below:

If you are using nodejs or express js for your backend. Install the cors package in your express app.

npm install cors

And, include the following in your index.js file.

var cors = require('cors')

app.use(cors())

That's it. It should work now. Don't forget to restart your node server.

To understand it better, read this article.

CodePudding user response：

It's a CORS problem , Try to use with this way

fetch('http://localhost:5000/users', { mode: 'no-cors' })