100% Free Developer Utility
CORS & API Domain Whitelist Configurator
When developers see red CORS errors during testing, their instinct is to put Access-Control-Allow-Origin: *. That creates cross-origin vulnerabilities. Generate strict, production-ready CORS headers and OPTIONS preflight handlers below.
Target Framework
The Wildcard (*) Credential Conflict
If your frontend sends session cookies or Authorization headers, modern browsers will outright reject any response containing Access-Control-Allow-Origin: *.
Browsers require matching the incoming Origin header against a declared whitelist before allowing credentialed responses through.
Production CORS Implementation
// In app/api/your-route/route.ts:
import { NextResponse } from 'next/server';
const ALLOWED_ORIGINS = [
"https://myapp.com",
"https://staging.myapp.com",
"http://localhost:3000"
];
function getCorsHeaders(origin: string | null) {
const isAllowed = origin && ALLOWED_ORIGINS.includes(origin);
const allowedOrigin = isAllowed ? origin : ALLOWED_ORIGINS[0];
return {
'Access-Control-Allow-Origin': allowedOrigin,
'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
'Access-Control-Allow-Headers': 'Content-Type, Authorization, X-Requested-With',
'Access-Control-Allow-Credentials': 'true',
'Access-Control-Max-Age': '86400',
};
}
// 1. Handle browser preflight OPTIONS request
export async function OPTIONS(req: Request) {
const origin = req.headers.get('origin');
return new NextResponse(null, {
status: 204,
headers: getCorsHeaders(origin),
});
}
// 2. Handle actual request with CORS headers
export async function POST(req: Request) {
const origin = req.headers.get('origin');
const headers = getCorsHeaders(origin);
// Business logic here
return NextResponse.json({ success: true }, { headers });
}Are other API endpoints leaking CORS wildcards?
CORS configuration is Check 13 in our 108 launch criteria. The Founder Pass ($15 one-time) checks every API route to verify that sensitive endpoints do not expose data to unauthorized origins.