Fix CORS Issues Securely with AI Prompts

Help me understand and fix this CORS error.

Error: paste your CORS error here

Common CORS errors and meanings:

1. "No 'Access-Control-Allow-Origin' header" Your server isn't sending CORS headers at all. Fix: Add CORS middleware/headers to your API.
2. "Origin 'X' is not allowed" Server has CORS but your origin isn't in the list. Fix: Add your frontend's origin to allowed origins.
3. "Preflight response is not successful" OPTIONS request failing. Fix: Ensure server handles OPTIONS and returns proper headers.
4. "Credentials not supported with wildcard origin" Using * with credentials: 'include'. Fix: Specify exact origin, not *.
5. "Request header field X is not allowed" Custom header not in Access-Control-Allow-Headers. Fix: Add your custom headers to allowed headers list.

Tell me:

• What origin is making the request?
• What origin is the API on?
• Are you using credentials (cookies/auth)?
• What HTTP method and headers?

Set up secure CORS configuration in my Express API.

npm install cors

const cors = require('cors');

// SECURE: Explicit origin list const allowedOrigins = 'https://myapp.com', 'https://www.myapp.com', process.env.NODE_ENV === 'development' && 'http://localhost:3000' .filter(Boolean);

app.use(cors({ origin: (origin, callback) => { // Allow requests with no origin (mobile apps, Postman) if (!origin) return callback(null, true);

if (allowedOrigins.includes(origin)) {
  callback(null, true);
} else {
  callback(new Error('CORS not allowed'));
}

}, credentials: true, // Allow cookies methods: 'GET', 'POST', 'PUT', 'DELETE', 'PATCH', allowedHeaders: 'Content-Type', 'Authorization', maxAge: 86400 // Cache preflight for 24 hours }));

// INSECURE - Never do this: // app.use(cors({ origin: '*', credentials: true })); // Won't work AND is dangerous

Put CORS middleware BEFORE your routes.

Add CORS to my Next.js API routes.

For Next.js 13+ App Router, create middleware.ts:

import { NextResponse } from 'next/server'; import type { NextRequest } from 'next/server';

const allowedOrigins = 'https://myapp.com', process.env.NODE_ENV === 'development' ? 'http://localhost:3000' : null .filter(Boolean);

export function middleware(request: NextRequest) { const origin = request.headers.get('origin'); const response = NextResponse.next();

if (origin && allowedOrigins.includes(origin)) { response.headers.set('Access-Control-Allow-Origin', origin); response.headers.set('Access-Control-Allow-Credentials', 'true'); response.headers.set('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS'); response.headers.set('Access-Control-Allow-Headers', 'Content-Type, Authorization'); }

// Handle preflight if (request.method === 'OPTIONS') { return new NextResponse(null, { status: 200, headers: response.headers }); }

return response; }

export const config = { matcher: '/api/:path*', };

Fix preflight request issues in my API.

Browsers send OPTIONS preflight for:

• Non-simple methods (PUT, DELETE, PATCH)
• Custom headers (Authorization, X-Custom-Header)
• Content-Type other than form-data, text/plain, application/x-www-form-urlencoded

Your server must:

1. Respond to OPTIONS with 200/204
2. Include all CORS headers
3. Not require authentication for OPTIONS

Express example: app.options('*', cors()); // Handle all preflight

// Or manually: app.options('/api/*', (req, res) => { res.header('Access-Control-Allow-Origin', req.headers.origin); res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS'); res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization'); res.header('Access-Control-Max-Age', '86400'); res.sendStatus(204); });

Cache preflight with Max-Age to reduce OPTIONS requests. Never put authentication middleware before CORS/OPTIONS handling.