CORS (Cross-Origin Resource Sharing) Errors

Answered by Shaykot Hossain Selim · February 3, 2026

Testing & Debugging CORS

🧰 Browser DevTools:

1. Open Network Tab
2. Filter by OPTIONS
3. Check Response Headers:

• Access-Control-Allow-Origin
• Access-Control-Allow-Methods
• Access-Control-Allow-Headers

🔧 Online Tool:

• Test CORS Headers
• [curl Test](command line):

curl -H "Origin: <http://localhost:3000>" --verbose <https://api.example.com>

Answered by Dipa Saha · February 3, 2026

CORS Configuration in Other Backends

🔧 Laravel (PHP):

// In `app/Http/Middleware/HandleCors.php`
return $next($request)
    ->header('Access-Control-Allow-Origin', '*');

🔧 Flask (Python):

from flask_cors import CORS
app = Flask(__name__)
CORS(app, origins=["<http://localhost:3000>"])

🔧 ASP.NET Core:

app.UseCors(policy =>
    policy.WithOrigins("<http://localhost:3000>")
    .AllowAnyMethod()
    .AllowAnyHeader());

Answered by Md Sharifuzzaman Shajib · February 3, 2026

How to Fix CORS in Express.js (Node.js)

🔧 Use CORS Middleware:

npm install cors

🔧 Code:

const express = require('express');
const cors = require('cors');
const app = express();

app.use(cors({ origin: '<http://localhost:3000>' })); // Allow specific origin
// or
// app.use(cors()); // Allow all origins (not recommended in production)

app.get('/api/data', (req, res) => {
  res.json({ message: 'Hello CORS!' });
});

Answered by Fozle Rabbi · February 3, 2026

When to Use Credentials with CORS

🔧 Enable Credentials:

Frontend:

fetch('<https://api.example.com/data>', {
  credentials: 'include'
});

Backend:

res.setHeader('Access-Control-Allow-Credentials', 'true');
res.setHeader('Access-Control-Allow-Origin', '<https://your-frontend.com>');

🔴 Note: You cannot use "*" as the origin when credentials: true.

Answered by Mynul Islam · February 3, 2026

Fixing CORS in Frontend Only (Development)

When the backend is not modifiable (e.g., third-party API), use proxying.

🔧 Option 1: Vite/React Proxy

// vite.config.js
server: {
  proxy: {
    '/api': '<https://external-api.com>',
  }
}

🔧 Option 2: Next.js

// next.config.js
module.exports = {
  async rewrites() {
    return [
      {
        source: '/api/:path*',
        destination: '<https://external-api.com/:path*>',
      },
    ]
  },
}

Answered by Sahin Khan · February 3, 2026

Setting wildcard * with credentials

❌ Browsers block this if credentials: true is set

✅ Use specific origin(s) instead of * when sending cookies or auth headers

Missing OPTIONS handler for preflight requests

❌ Requests like PUT, DELETE, or custom headers trigger a preflight

✅ Add a route or middleware to handle OPTIONS with proper CORS headers

Incorrect protocol or domain in origin

❌ http://localhost:3000 ≠ https://localhost:3000

✅ Make sure Origin in request matches the exact domain and protocol allowed by the server

Allowing all origins (*) in production

❌ Serious security risk—any domain can access your API

✅ Always specify trusted domains explicitly in production

Not exposing custom headers

❌ APIs sending custom headers may be blocked

✅ Use Access-Control-Expose-Headers to whitelist headers like X-Total-Count

Setting CORS headers only on GET

❌ Other methods like POST, PATCH will fail

✅ Apply headers on all relevant routes, including preflight

Hardcoding development origins in production config

❌ Exposes dev origins publicly

✅ Use environment variables to control allowed origins by environment

Improper Access-Control-Allow-Methods

❌ Omitting needed methods causes request failure

✅ Explicitly allow GET, POST, PUT, DELETE, OPTIONS, etc.

Not returning CORS headers on failed responses

❌ Browser still checks CORS on 400/500 responses

✅ Return the same headers even on errors

Answered by Ratul Sikder · February 3, 2026

CORS Cheatsheet Summary

Access-Control-Allow-Origin

➤ Specifies which origin(s) are allowed to access the resource

Access-Control-Allow-Methods

➤ Defines allowed HTTP methods (e.g., GET, POST, PUT, DELETE)

Access-Control-Allow-Headers

➤ Lists custom headers that can be sent with the request

Access-Control-Allow-Credentials

➤ Enables sending cookies or authorization headers with requests

Access-Control-Max-Age

➤ Sets how long (in seconds) the preflight response can be cached by the browser