How to Fix CORS Access-Control-Allow-Origin Error
Quick Diagnostics
The CORS (Cross-Origin Resource Sharing) error occurs strictly in the client's browser. It happens when a web application on one domain (e.g., localhost:3000) tries to consume resources from an API hosted on another domain, and the API server does not include the necessary HTTP headers to authorize the request.
🚀 Step-by-Step Solution
The correct way to solve this is to configure the Backend (server) to accept requests from your client. Never use browser extensions in production environments.
Step 1: Node.js (Express) Solution
Install the official CORS middleware in your project:
npm install cors
Then, implement it by restricting access only to your trusted domains:
const express = require('express');
const cors = require('cors');
const app = express();
const corsOptions = {
origin: 'https://yourwebsite.com', // Your frontend domain
optionsSuccessStatus: 200
};
app.use(cors(corsOptions));
Step 2: Native HTTP Headers Solution
If you handle server responses manually, make sure to inject the following header into the response headers:
Access-Control-Allow-Origin: https://yourwebsite.com
Prevention Advice
Recommended security practices:
- Avoid using the wildcard * in production environments as it exposes your API publicly.
- Properly configure allowed methods (GET, POST, PUT, DELETE).