CORS Header Generator

CORS (Cross-Origin Resource Sharing) is a browser security mechanism that controls which websites can make requests to your API or server. By default, browsers block requests from one origin (domain, protocol, or port) to another — this is called the Same-Origin Policy. CORS headers tell the browser which cross-origin requests to allow.

If you've ever seen the error Access to fetch at 'https://api.example.com' from origin 'https://app.example.com' has been blocked by CORS policy, you need to configure CORS headers on your server. This involves setting the right combination of Access-Control-Allow-Origin, Access-Control-Allow-Methods, Access-Control-Allow-Headers, and related headers.

This CORS header generator lets you configure your CORS policy interactively and generates ready-to-use configuration for Express.js, nginx, Apache, Next.js middleware, Vercel, and Flask. It includes security warnings for common misconfigurations like using wildcard origins with credentials. All configuration happens in your browser.

1. Choose a preset or start fresh — Select from presets like "Allow All (Dev)", "Single Origin", "Multiple Origins", or "API with Auth" to get a common starting configuration.
2. Configure allowed origins — Choose wildcard (*) for development, or add specific origins (like https://app.example.com) for production. Multiple origins are supported.
3. Select HTTP methods — Toggle which HTTP methods (GET, POST, PUT, PATCH, DELETE, OPTIONS, HEAD) your API should accept from cross-origin requests.
4. Set allowed and exposed headers — Configure which request headers to accept (Allow-Headers) and which response headers to make readable (Expose-Headers) by the browser.
5. Configure credentials and max-age — Enable credentials support for cookie-based auth, and set the preflight cache duration to reduce OPTIONS requests.
6. Copy the output — Switch between output tabs (Raw Headers, Express.js, nginx, Apache, Next.js, Vercel, Flask) and copy the configuration for your server.

• Multi-platform output — Generates CORS configuration for Express.js (cors middleware), nginx (add_header), Apache (Header set), Next.js (middleware.ts), Vercel (vercel.json), and Flask (flask-cors).
• Security warnings — Real-time warnings for dangerous configurations like wildcard origin with credentials, missing OPTIONS method for preflight, or wildcard in production.
• Multiple origin support — Configure multiple allowed origins with proper Vary header handling. The nginx output uses a map block for efficient multi-origin support.
• Quick presets — Four presets cover common scenarios: development (allow all), single origin, multiple origins, and API with authentication.
• Custom headers — Add custom allowed headers and exposed headers beyond the common ones (Content-Type, Authorization, etc.).
• 100% client-side — Your CORS configuration is generated entirely in your browser. No server communication needed.

• API server setup — Configure CORS for your REST API or GraphQL server to allow requests from your frontend application hosted on a different domain.
• Development environments — Set up permissive CORS for local development where your frontend (localhost:3000) and API (localhost:8080) run on different ports.
• Microservices architecture — Configure CORS for API gateways and microservices that need to accept requests from multiple frontend applications.
• Third-party integrations — Set up CORS to allow specific partner domains to make API requests, like webhook callbacks or embedded widgets.
• Debugging CORS issues — Generate the correct header configuration to resolve "blocked by CORS policy" errors in your browser console.