CORS error when calling my Node.js API from frontend

[steven8306]

I built a small Express API and a React frontend.
When I fetch data, I get:

Access to fetch at 'http://localhost:4000/api/data' from origin 'http://localhost:3000' has been blocked by CORS policy.

My backend looks like:

const express = require('express');
const app = express();
app.get('/api/data', (req, res) => res.json({ message: 'Hello' }));
app.listen(4000);

What do I need to fix?

[ai-28]

You need to enable CORS (Cross-Origin Resource Sharing) so your frontend (port 3000) can talk to your backend (port 4000).

Install the cors middleware:
Then update your server:

const express = require('express');
const cors = require('cors');
const app = express();

app.use(cors()); // allow all origins

app.get('/api/data', (req, res) => res.json({ message: 'Hello' }));
app.listen(4000);

If you want to limit it:

app.use(cors({ origin: 'http://localhost:3000' }));

That fixes the CORS error.

[steven8306]

Thanks

[ai-28]

great!