Blocked by CORS policy
The browser blocked a cross-origin HTTP request because the destination server lacks Access-Control-Allow-Origin headers.
Usually happens because:
- ☑ Server missing Access-Control-Allow-Origin header
- ☑ Preflight OPTIONS check rejected
- ☑ Mismatched request headers
🔍 Quick Checklist:
📊 Where this usually happens (estimated occurrence)
What is Blocked by CORS policy?
Cross-Origin Resource Sharing (CORS) is a security mechanism enforced by browsers to prevent scripts on one origin (e.g. domain A) from querying resources on another origin (e.g. domain B) unless domain B explicitly authorizes it via response headers.
Common Causes
- The server does not send Access-Control-Allow-Origin headers.
- Mismatch in allowed methods (GET, POST) or custom request headers.
- Omitting credentials (cookies/tokens) configurations when requested.
Common Mistakes
- Expecting CORS to block backend requests (CORS is enforced strictly by the browser client, not by postman or curl).
How to Fix
Framework-Specific Examples
Custom headers trigger a preflight OPTIONS request. The server must allow them in CORS configs.
fetch('https://api.com/data', {
headers: {
'X-Custom-Header': 'val'
}
});Server Configuration Examples
Configuring the backend to respond with valid CORS headers using Express.
const cors = require('cors');
// Enable CORS for all routes
app.use(cors({
origin: 'http://localhost:3000',
credentials: true
}));Best Practices
- Deploy a reverse proxy (like Nginx) to route traffic through the same domain in production.
- Use local dev proxies to bypass CORS blocks during staging.
Frequently Asked Questions (FAQ)
Q: What is CORS?
Cross-Origin Resource Sharing is a browser security feature that restricts web pages from making requests to a different domain than the one that served the web page, unless the other domain explicitly allows it.
Q: Why does CORS work in Postman but fail in the browser?
Postman is a developer tool, not a browser. CORS is a browser-enforced security policy designed to protect users from malicious script operations accessing their credentials.
Q: What is a preflight request?
A preflight request is an OPTIONS request sent automatically by the browser before the actual request to verify if the server understands and allows the custom methods or headers used.
Q: Can I bypass CORS using a local proxy?
Yes. You can run a proxy server on your own domain that fetches the data from the target API and returns it to your browser. Since the browser requests from the same domain, no CORS is triggered.