CORS Headers Generator

How to Use the CORS Headers Generator

1. Set allowed origins — enter specific domain URLs or use * to allow all origins.
2. Select allowed methods — check the HTTP methods your API accepts (GET, POST, PUT, DELETE, PATCH, OPTIONS).
3. Configure headers — specify which request headers clients can send, and which response headers they can read.
4. Set max age — define how long browsers should cache preflight responses (in seconds).
5. Choose output format — select HTTP Headers, Express.js, Nginx, Apache, or .htaccess using the chips above.
6. Copy or download — use the buttons to copy the generated configuration to your clipboard or download it as a file.

What This Tool Does

This CORS Headers Generator creates the correct Access-Control-* HTTP headers for your web server or API framework. CORS (Cross-Origin Resource Sharing) is a browser security mechanism that restricts web pages from making requests to domains different from the one that served the page. Without proper CORS headers, frontend applications cannot communicate with APIs hosted on different domains — a common scenario in modern web development where the frontend (e.g., React on app.example.com) and backend (e.g., Node.js on api.example.com) are deployed separately.

Understanding CORS Headers

• Access-Control-Allow-Origin — specifies which origins can access the resource. Use * for public APIs or specific URLs for restricted access.
• Access-Control-Allow-Methods — lists the HTTP methods permitted for cross-origin requests (GET, POST, PUT, DELETE, PATCH, OPTIONS).
• Access-Control-Allow-Headers — defines which request headers the client is allowed to send. Common values include Content-Type, Authorization, and custom headers.
• Access-Control-Expose-Headers — specifies which response headers the client-side JavaScript can access. By default, only simple headers (Cache-Control, Content-Language, Content-Type, Expires, Last-Modified, Pragma) are exposed.
• Access-Control-Max-Age — tells the browser how long (in seconds) to cache the preflight response, reducing the number of OPTIONS requests.
• Access-Control-Allow-Credentials — when set to true, allows cookies and authentication headers to be sent with cross-origin requests. Cannot be used with Access-Control-Allow-Origin: *.

Preflight Requests Explained

When a browser needs to make a "non-simple" request — one that uses methods like PUT or DELETE, sends custom headers like Authorization, or uses a content type other than application/x-www-form-urlencoded, multipart/form-data, or text/plain — it first sends an OPTIONS request called a "preflight." This preflight asks the server if the actual request is permitted. The server responds with the appropriate CORS headers, and only if they match does the browser proceed with the real request. The Access-Control-Max-Age header controls how long the browser caches the preflight response. Setting this to 86400 (24 hours) means the browser will only send one preflight request per day for each unique URL, significantly reducing network overhead.

Common CORS Mistakes

The most frequent CORS error developers encounter is forgetting to handle the OPTIONS preflight request. Your server must respond to OPTIONS requests with a 200 or 204 status and the correct CORS headers — many frameworks require explicit route handlers for OPTIONS. Another common mistake is using Access-Control-Allow-Origin: * while also setting Access-Control-Allow-Credentials: true — this combination is forbidden by the CORS specification. If you need credentials, you must specify the exact origin. Also watch for trailing slashes in origin URLs: https://example.com and https://example.com/ are treated as different origins. Finally, ensure your Access-Control-Allow-Headers list includes every custom header your client sends — missing even one will cause the preflight to fail.

CORS in Different Environments

Each web server and framework has its own way of configuring CORS. Express.js uses the cors middleware package or manual header setting. Nginx uses the add_header directive in the location block. Apache uses Header set directives in the virtual host or .htaccess. This tool generates the correct configuration for each environment, so you can simply copy and paste it into your config file. For more advanced scenarios — like dynamic origin validation, per-route CORS policies, or proxy-level CORS — you may need to adapt the generated configuration. For related security tools, try our CSP Header Generator or the Basic Auth Header Generator.