What Is CORS?
CORS (Cross-Origin Resource Sharing) is a browser security mechanism that restricts HTTP requests made from one origin (domain + protocol + port) to a different origin. The same-origin policy prevents `https://myapp.com` from making API calls to `https://api.other.com` without explicit server permission.
CORS is enforced by the browser, not the server. If you make the same request from curl or Postman, CORS doesn't apply — it only blocks browser-initiated cross-origin requests. This means CORS errors always need to be fixed on the server side by returning the correct response headers.
## How to Fix CORS Errors Step by Step
1. $1
2. $1
3. $1
4. $1
5. $1
6. $1
## Key CORS Headers
- **Access-Control-Allow-Origin** — specifies allowed origins. Use `*` for public APIs, or a specific origin like `https://myapp.com` for authenticated APIs.
- **Access-Control-Allow-Methods** — comma-separated allowed HTTP methods: `GET, POST, PUT, DELETE, OPTIONS`
- **Access-Control-Allow-Headers** — allowed request headers: `Content-Type, Authorization`
- **Access-Control-Allow-Credentials** — set to `true` to allow cookies and auth headers in cross-origin requests.
- **Access-Control-Max-Age** — how long preflight results can be cached (seconds): `86400` = 24 hours.
## CORS Configuration Examples
### Node.js with Express
```
`const cors = require('cors');
// Allow all origins (public API)
app.use(cors());
// Allow specific origin
app.use(cors({
origin: 'https://myapp.com',
credentials: true,
methods: ['GET','POST','PUT','DELETE'],
allowedHeaders: ['Content-Type','Authorization']
}));`
nginx
### Nginx Configuration
```
`add_header 'Access-Control-Allow-Origin' 'https://myapp.com';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'Authorization, Content-Type';`
## Use Cases
### Frontend + Separate Backend API
The most common CORS scenario: a React app at `localhost:3000` calling an Express API at `localhost:5000`. Different ports mean different origins — CORS must be configured on the backend to allow the frontend's origin.
### Public API Serving Multiple Frontends
Public APIs that serve third-party frontends should use `Access-Control-Allow-Origin: *`. Never use wildcard with credentials enabled — this is a security risk and the browser will reject it anyway.
**→ Test Your API Headers with DevKits**
<a href="https://aiforeverthing.com/">aiforeverthing.com — API tester and CORS checker. No signup required.</a>
## Frequently Asked Questions
### Why do CORS errors only happen in the browser but not in Postman?
CORS is a browser security feature, not a server feature. The browser checks CORS headers and blocks the response if they're missing. Postman and curl make requests directly without browser security restrictions, so they never trigger CORS errors.
### What is a preflight request?
For non-simple requests (POST/PUT/DELETE with JSON body, or requests with custom headers), browsers first send an OPTIONS request to ask the server if the actual request is allowed. This is the "preflight." The server must respond with appropriate CORS headers to the OPTIONS request.
### Can I fix CORS on the frontend?
Not directly — CORS must be configured on the server. However, during development you can use a proxy: create a dev proxy in your frontend bundler (Vite, webpack, CRA) that forwards API requests to the backend, making them same-origin from the browser's perspective.
### Is CORS a security feature or a bug?
It's a security feature. Without CORS, a malicious website could make authenticated API calls using your cookies/session to any site you're logged into. CORS enforces that only explicitly authorized origins can make cross-origin requests with credentials.
### How do I allow multiple specific origins in CORS?
The `Access-Control-Allow-Origin` header only supports one origin value (or `*`). To allow multiple origins, dynamically check the request's `Origin` header against an allowlist and echo it back if it matches: `if (allowedOrigins.includes(req.headers.origin)) { res.setHeader('Access-Control-Allow-Origin', req.headers.origin); }`
### Recommended Hosting for Developers
- **<a href="https://www.hostinger.com/web-hosting?REFERRALCODE=88SHEZECLZMG">Hostinger</a>** — From $2.99/mo. Excellent for static sites and Node.js apps.
- **<a href="https://www.digitalocean.com/?refcode=cd17c633ca0c">DigitalOcean</a>** — $200 free credit for new accounts. Best for scalable backends.
Originally published at aiforeverthing.com
Top comments (0)