Introduction
CORS (Cross-Origin Resource Sharing) errors are one of the most common problems developers face when building websites or APIs. You may have seen messages like “Access-Control-Allow-Origin missing” or “CORS policy blocked the request.” These errors happen because your browser blocks requests that come from a different domain or port for security reasons.
The good news is that CORS errors are easy to fix—once you understand how they work. In this guide, we explain CORS in simple language, show you updated solutions for JavaScript, Node.js, and API Gateway, and provide clear examples so you can apply them immediately.
What Is a CORS Error?
CORS errors appear when a browser blocks a request made from one origin (domain, port, or protocol) to another. This prevents unauthorized websites from accessing your data without permission.
Example Scenario:
Your frontend:
http://localhost:3000
Your backend:
http://localhost:5000
Even though both are on your computer, the browser sees this as a cross-origin request and may block it unless the server allows it.
Why Do Browsers Block Cross-Origin Requests?
Browsers follow a security rule called the Same-Origin Policy, which prevents websites from accessing data from other sites.
This protects users from:
To make cross-origin requests safely, the server must explicitly allow the requesting origin using CORS headers.
Common CORS Error Messages
You may see errors like:
These messages all point to the same issue—your server is not allowing your frontend to access it.
How to Fix CORS Errors in JavaScript (Frontend)
On the frontend, you cannot bypass CORS because it is enforced by the browser. However, you can control how you make requests.
1. Use the Correct Mode in Fetch
fetch("https://example.com/api", {
method: "GET",
mode: "cors"
})
This tells the browser that you expect a cross-origin request.
2. Avoid Using Proxy Hacks in Production
Development proxies like Vite or React can temporarily solve the issue, but the real fix must happen on the backend.
3. Do Not Disable Browser Security
This is unsafe and should never be used in real applications.
How to Fix CORS Errors in Node.js (Backend)
Fixing CORS on the server is the correct solution. Node.js makes this easy.
Option 1: Enable CORS Using the CORS Package
import express from "express";
import cors from "cors";
const app = express();
app.use(cors());
app.get("/data", (req, res) => {
res.json({ message: "CORS Enabled" });
});
app.listen(5000, () => console.log("Server running on port 5000"));
This allows all origins. For security, you can limit it to specific domains.
Option 2: Allow Only Specific Origins
const allowedOrigins = ["http://localhost:3000", "https://yourdomain.com"];
app.use(
cors({
origin: (origin, callback) => {
if (!origin || allowedOrigins.includes(origin)) {
callback(null, true);
} else {
callback(new Error("Not allowed by CORS"));
}
}
})
);
This ensures only trusted websites can access your API.Option 3: Manually Set CORS Headers
app.use((req, res, next) => {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE");
res.header("Access-Control-Allow-Headers", "Content-Type, Authorization");
next();
});
Use "*" only for public APIs. Private APIs should restrict origins.
How to Fix CORS Errors in AWS API Gateway
API Gateway requires CORS to be enabled both in the API settings and the Lambda response.
1. Enable CORS in API Gateway Settings
Open API Gateway
Select your route
Click Enable CORS
Deploy the API
2. Add CORS Headers in Lambda Response
return {
statusCode: 200,
headers: {
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Headers": "Content-Type",
"Access-Control-Allow-Methods": "GET,POST,OPTIONS"
},
body: JSON.stringify({ message: "Success" })
};
Without this, API Gateway will still block the request.
Understanding Preflight Requests (OPTIONS)
Before sending certain types of requests, the browser sends an OPTIONS request to check if the server allows it.
Your server must respond with:
Access-Control-Allow-Origin
Access-Control-Allow-Methods
Access-Control-Allow-Headers
If any of these are missing, the browser will block the main request.
Best Practices for Handling CORS Safely
1. Avoid Using * for Private Data
Instead, specify allowed domains.
2. Always Allow OPTIONS Requests
PREVENTS preflight failures.
3. Keep Client and Server on the Same Domain (if possible)
This reduces the need for CORS.
4. Use HTTPS for All Requests
Mixed content can cause additional errors.
5. Test APIs Using Tools Like Postman
Postman does not enforce CORS, so it helps isolate server problems.
Common Mistakes to Avoid
Adding CORS headers only on successful responses
Forgetting to handle OPTIONS method
Enabling CORS on backend but not on API Gateway
Using client-side hacks instead of server-side solutions
Conclusion
CORS errors can be frustrating, but once you understand how browsers enforce cross-origin rules, fixing them becomes easy. The key is to allow trusted origins on the server side and respond correctly to preflight (OPTIONS) requests. Whether you're building with JavaScript, Node.js, or API Gateway, the updated methods in this guide will help you solve CORS issues cleanly and safely.