How to Fix CORS Error in Express: Simple Steps

To fix a CORS error in Express, you need to allow cross-origin requests by adding the cors middleware or setting appropriate headers manually. This tells the browser that your server permits requests from other origins, preventing the error.

Why This Happens

CORS (Cross-Origin Resource Sharing) errors happen because browsers block web pages from making requests to a different domain than the one that served the page. This is a security feature to prevent unwanted data access. If your Express server does not explicitly allow requests from other origins, the browser will block them and show a CORS error.

javascript

import express from 'express';

const app = express();

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

app.listen(3000, () => console.log('Server running on port 3000'));

Output

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

The Fix

To fix the CORS error, add the cors middleware to your Express app. This middleware automatically sets the correct headers to allow cross-origin requests. You can also configure it to allow specific origins or methods.

javascript

import express from 'express';
import cors from 'cors';

const app = express();

app.use(cors()); // Enable CORS for all origins

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

app.listen(3000, () => console.log('Server running on port 3000'));

Output

Server running on port 3000

Client can successfully fetch data without CORS errors.

Prevention

Always enable CORS early in your Express app setup to avoid errors when your frontend and backend run on different origins. Use the cors package for easy and flexible configuration. Limit allowed origins in production to trusted domains for security. Regularly test your API with different clients to catch CORS issues early.

Related Errors

Other common errors related to CORS include:

• Preflight request failure: Happens when the browser sends an OPTIONS request but the server does not respond correctly.
• Missing headers: The server must send Access-Control-Allow-Origin and sometimes Access-Control-Allow-Methods headers.
• Credential issues: If you use cookies or authorization headers, you must set credentials: true in both client and server CORS settings.

Key Takeaways

Use the cors middleware in Express to fix CORS errors quickly and correctly.

CORS errors happen because browsers block requests to different origins without permission.

Configure allowed origins carefully to keep your API secure.

Test your API from different clients to catch CORS issues early.

Remember to handle preflight OPTIONS requests if your API uses custom headers or methods.