CORS, Cross-Origin Request Blocked
The browser blocked a cross-origin request because the server did not include the required CORS headers.
Root Cause
The API server does not include Access-Control-Allow-Origin in its response, or the origin is not in the allowed list.
How to Fix
Add CORS headers to the server response. In Express: use the cors() middleware. In Next.js: add headers in next.config.js or API route handlers.
Quick Summary
CORS errors occur when a browser blocks a cross-origin request. Fix by adding Access-Control-Allow-Origin headers on the server. Never use wildcard (*) in production for authenticated requests.
Key Takeaways
- CORS is enforced by the browser, not the server
- Add Access-Control-Allow-Origin: https://yourdomain.com to server responses
- For credentials (cookies, auth headers), use specific origins, not wildcard *
- Preflight OPTIONS requests must also return CORS headers
When to use it
- Frontend on localhost:3000 calling API on localhost:8080
- Production frontend calling a different-domain API
- Third-party API that does not allow your origin
Common Mistakes
- Using Access-Control-Allow-Origin: * with credentials, browsers reject this combination
- Not handling OPTIONS preflight requests
CORS CORS, Cross-Origin Request Blocked, Frequently Asked
How do I fix CORS in Express?
npm install cors, then: app.use(cors({ origin: 'https://yourdomain.com', credentials: true }))
Still having issues?
Check your network logs or use our developer tools to inspect headers, decode tokens, or validate your requests.