[{"data":1,"prerenderedAt":371},["ShallowReactive",2],{"blog-prompts/fix-cors-issues":3},{"id":4,"title":5,"body":6,"category":350,"date":351,"dateModified":352,"description":353,"draft":354,"extension":355,"faq":356,"featured":354,"headerVariant":357,"image":356,"keywords":356,"meta":358,"navigation":359,"ogDescription":360,"ogTitle":356,"path":361,"readTime":356,"schemaOrg":362,"schemaType":363,"seo":364,"sitemap":365,"stem":366,"tags":367,"twitterCard":369,"__hash__":370},"blog/blog/prompts/fix-cors-issues.md","Fix CORS Issues Securely with AI Prompts",{"type":7,"value":8,"toc":341},"minimark",[9,16,21,24,78,82,85,152,162,166,173,213,217,220,263,272,288,292,295,315,329],[10,11,12],"tldr",{},[13,14,15],"p",{},"CORS blocks cross-origin requests by default - that's a security feature, not a bug. The fix isn't \"allow all origins\" - it's explicitly allowing YOUR frontend origins. Never use Access-Control-Allow-Origin: * with credentials. These prompts help you configure CORS correctly.",[17,18,20],"h2",{"id":19},"understand-cors-errors","Understand CORS Errors",[13,22,23],{},"Paste this prompt along with your CORS error message to get a diagnosis and fix. Your AI will identify which of the five common CORS failure types you're hitting and tell you exactly which server-side header or middleware change to make.",[25,26,28,31,38,41,60,63],"prompt-box",{"title":27},"Debug CORS Issues",[13,29,30],{},"Help me understand and fix this CORS error.",[13,32,33,34],{},"Error: ",[35,36,37],"span",{},"paste your CORS error here",[13,39,40],{},"Common CORS errors and meanings:",[42,43,44,48,51,54,57],"ol",{},[45,46,47],"li",{},"\"No 'Access-Control-Allow-Origin' header\"\nYour server isn't sending CORS headers at all.\nFix: Add CORS middleware/headers to your API.",[45,49,50],{},"\"Origin 'X' is not allowed\"\nServer has CORS but your origin isn't in the list.\nFix: Add your frontend's origin to allowed origins.",[45,52,53],{},"\"Preflight response is not successful\"\nOPTIONS request failing.\nFix: Ensure server handles OPTIONS and returns proper headers.",[45,55,56],{},"\"Credentials not supported with wildcard origin\"\nUsing * with credentials: 'include'.\nFix: Specify exact origin, not *.",[45,58,59],{},"\"Request header field X is not allowed\"\nCustom header not in Access-Control-Allow-Headers.\nFix: Add your custom headers to allowed headers list.",[13,61,62],{},"Tell me:",[64,65,66,69,72,75],"ul",{},[45,67,68],{},"What origin is making the request?",[45,70,71],{},"What origin is the API on?",[45,73,74],{},"Are you using credentials (cookies/auth)?",[45,76,77],{},"What HTTP method and headers?",[17,79,81],{"id":80},"express-cors-configuration","Express CORS Configuration",[13,83,84],{},"Copy this prompt to generate a secure Express CORS setup with an explicit origin allowlist, credentials support, and preflight caching. Your AI will produce drop-in middleware code with separate dev and production origins.",[25,86,88,91,94,97,121,124,135,146,149],{"title":87},"Configure CORS in Express",[13,89,90],{},"Set up secure CORS configuration in my Express API.",[13,92,93],{},"npm install cors",[13,95,96],{},"const cors = require('cors');",[13,98,99,100,120],{},"// SECURE: Explicit origin list\nconst allowedOrigins = ",[35,101,102,103,109,110,114,115,119],{},"\n'",[104,105,106],"a",{"href":106,"rel":107},"https://myapp.com",[108],"nofollow","',\n'",[104,111,112],{"href":112,"rel":113},"https://www.myapp.com",[108],"',\nprocess.env.NODE_ENV === 'development' && '",[104,116,117],{"href":117,"rel":118},"http://localhost:3000",[108],"'\n",".filter(Boolean);",[13,122,123],{},"app.use(cors({\norigin: (origin, callback) => {\n// Allow requests with no origin (mobile apps, Postman)\nif (!origin) return callback(null, true);",[125,126,131],"pre",{"className":127,"code":129,"language":130},[128],"language-text","if (allowedOrigins.includes(origin)) {\n  callback(null, true);\n} else {\n  callback(new Error('CORS not allowed'));\n}\n","text",[132,133,129],"code",{"__ignoreMap":134},"",[13,136,137,138,141,142,145],{},"},\ncredentials: true, // Allow cookies\nmethods: ",[35,139,140],{},"'GET', 'POST', 'PUT', 'DELETE', 'PATCH'",",\nallowedHeaders: ",[35,143,144],{},"'Content-Type', 'Authorization'",",\nmaxAge: 86400 // Cache preflight for 24 hours\n}));",[13,147,148],{},"// INSECURE - Never do this:\n// app.use(cors({ origin: '*', credentials: true })); // Won't work AND is dangerous",[13,150,151],{},"Put CORS middleware BEFORE your routes.",[153,154,155],"warning-box",{},[13,156,157,161],{},[158,159,160],"strong",{},"Never use Access-Control-Allow-Origin: * with credentials:"," It doesn't even work (browsers reject it), and attempting it signals you don't understand CORS. Always specify exact origins when using cookies or auth headers.",[17,163,165],{"id":164},"nextjs-api-routes-cors","Next.js API Routes CORS",[13,167,168,169,172],{},"Use this prompt to generate CORS handling for Next.js 13+ App Router. Your AI will create a complete ",[132,170,171],{},"middleware.ts"," file with origin validation, credential headers, and OPTIONS preflight handling scoped to your API routes.",[25,174,176,179,182,185,198,201,204,207,210],{"title":175},"Next.js CORS Setup",[13,177,178],{},"Add CORS to my Next.js API routes.",[13,180,181],{},"For Next.js 13+ App Router, create middleware.ts:",[13,183,184],{},"import { NextResponse } from 'next/server';\nimport type { NextRequest } from 'next/server';",[13,186,187,188,120],{},"const allowedOrigins = ",[35,189,102,190,193,194,197],{},[104,191,106],{"href":106,"rel":192},[108],"',\nprocess.env.NODE_ENV === 'development' ? '",[104,195,117],{"href":117,"rel":196},[108],"' : null\n",[13,199,200],{},"export function middleware(request: NextRequest) {\nconst origin = request.headers.get('origin');\nconst response = NextResponse.next();",[13,202,203],{},"if (origin && allowedOrigins.includes(origin)) {\nresponse.headers.set('Access-Control-Allow-Origin', origin);\nresponse.headers.set('Access-Control-Allow-Credentials', 'true');\nresponse.headers.set('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');\nresponse.headers.set('Access-Control-Allow-Headers', 'Content-Type, Authorization');\n}",[13,205,206],{},"// Handle preflight\nif (request.method === 'OPTIONS') {\nreturn new NextResponse(null, { status: 200, headers: response.headers });\n}",[13,208,209],{},"return response;\n}",[13,211,212],{},"export const config = {\nmatcher: '/api/:path*',\n};",[17,214,216],{"id":215},"preflight-requests","Preflight Requests",[13,218,219],{},"Paste this prompt to fix preflight (OPTIONS) request failures in your API. Your AI will explain which requests trigger preflights, add proper OPTIONS handlers that return the right CORS headers without requiring authentication, and set up Max-Age caching.",[25,221,223,226,229,240,243,254,257,260],{"title":222},"Handle Preflight (OPTIONS)",[13,224,225],{},"Fix preflight request issues in my API.",[13,227,228],{},"Browsers send OPTIONS preflight for:",[64,230,231,234,237],{},[45,232,233],{},"Non-simple methods (PUT, DELETE, PATCH)",[45,235,236],{},"Custom headers (Authorization, X-Custom-Header)",[45,238,239],{},"Content-Type other than form-data, text/plain, application/x-www-form-urlencoded",[13,241,242],{},"Your server must:",[42,244,245,248,251],{},[45,246,247],{},"Respond to OPTIONS with 200/204",[45,249,250],{},"Include all CORS headers",[45,252,253],{},"Not require authentication for OPTIONS",[13,255,256],{},"Express example:\napp.options('*', cors()); // Handle all preflight",[13,258,259],{},"// Or manually:\napp.options('/api/*', (req, res) => {\nres.header('Access-Control-Allow-Origin', req.headers.origin);\nres.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');\nres.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');\nres.header('Access-Control-Max-Age', '86400');\nres.sendStatus(204);\n});",[13,261,262],{},"Cache preflight with Max-Age to reduce OPTIONS requests.\nNever put authentication middleware before CORS/OPTIONS handling.",[264,265,266],"tip-box",{},[13,267,268,271],{},[158,269,270],{},"Pro tip:"," If your frontend and API are on the same origin, you don't need CORS at all. Consider proxying API requests through your frontend server (Next.js rewrites, nginx proxy_pass) to avoid CORS entirely.",[273,274,275,282],"faq-section",{},[276,277,279],"faq-item",{"question":278},"My API works in Postman but not the browser. Why?",[13,280,281],{},"Postman doesn't enforce CORS - only browsers do. CORS is a browser security feature. Your API needs to send CORS headers for browser requests from different origins.",[276,283,285],{"question":284},"Can I just disable CORS in the browser?",[13,286,287],{},"You can for development with browser flags, but you can't do it for your users. Fix CORS on the server - that's the only real solution. Browser workarounds are development-only.",[17,289,291],{"id":290},"further-reading","Further Reading",[13,293,294],{},"Want to understand the vulnerability before fixing it? These guides explain what's happening and why.",[64,296,297,303,309],{},[45,298,299],{},[104,300,302],{"href":301},"/blog/vulnerabilities/cors-misconfiguration","CORS misconfiguration risks",[45,304,305],{},[104,306,308],{"href":307},"/blog/how-to/setup-cors-properly","How to set up CORS properly",[45,310,311],{},[104,312,314],{"href":313},"/blog/vulnerabilities/exposed-api-keys","Understanding exposed API keys",[316,317,318,324],"related-articles",{},[319,320],"related-card",{"description":321,"href":322,"title":323},"All security headers","/blog/prompts/add-security-headers","Add Security Headers",[319,325],{"description":326,"href":327,"title":328},"SameSite and credentials","/blog/prompts/secure-cookies","Secure Cookies",[330,331,334,338],"cta-box",{"href":332,"label":333},"/","Start Free Scan",[17,335,337],{"id":336},"check-your-cors-setup","Check Your CORS Setup",[13,339,340],{},"Scan your API for overly permissive CORS configuration.",{"title":134,"searchDepth":342,"depth":342,"links":343},2,[344,345,346,347,348,349],{"id":19,"depth":342,"text":20},{"id":80,"depth":342,"text":81},{"id":164,"depth":342,"text":165},{"id":215,"depth":342,"text":216},{"id":290,"depth":342,"text":291},{"id":336,"depth":342,"text":337},"prompts","2026-02-18","2026-03-06","AI prompts to fix CORS issues without compromising security. Understand Cross-Origin Resource Sharing and configure it properly for your API.",false,"md",null,"cyan",{},true,"AI prompts to configure CORS properly without security compromises.","/blog/prompts/fix-cors-issues","[object Object]","BlogPosting",{"title":5,"description":353},{"loc":361},"blog/prompts/fix-cors-issues",[368],"Deployment","summary_large_image","w4cRvsmtju5I2pETiFfIL2puLAXvYFJqNOeN6zzVQpY",1775843921451]