CORS Header Generator

Generate correct Cross-Origin Resource Sharing headers for nginx, Apache, Express, and Flask

A CORS header generator helps you configure Cross-Origin Resource Sharing policies so browsers allow your frontend to call APIs on a different domain. Misconfigured CORS is one of the most common sources of "blocked by CORS policy" errors — this tool builds the exact headers and server config snippets you need.

Allowed Origins

Allowed Methods

Allowed Request Headers

Options

86400 = 1 day, 604800 = 1 week, 0 = no cache

Response headers accessible to JavaScript

Generated Headers


      

Server Config Snippet


      

Header Explanations

How to Use the CORS Header Generator

CORS (Cross-Origin Resource Sharing) headers tell browsers which websites are allowed to make requests to your server. Without the correct CORS configuration, your API will refuse requests from any frontend on a different domain — even your own. This CORS header generator builds all necessary headers and gives you ready-to-paste server config snippets.

Step 1: Set Your Allowed Origins

Start by specifying which domains are allowed to access your API. For a public API anyone can call, choose "Wildcard (*)" — but note this disables credential support. For a private API used by specific frontends, choose "Specific origins" and list each domain exactly as it appears in the browser (including the protocol: https://app.example.com — never just app.example.com). The "Reflect request origin" option dynamically mirrors back the request's Origin header — useful for multi-tenant APIs where you validate origins in code.

Step 2: Choose Allowed Methods

Select every HTTP method your API accepts. GET and POST are simple requests that don't trigger a preflight. PUT, DELETE, PATCH, and custom methods do trigger a preflight OPTIONS request. Always include OPTIONS when you allow any of these methods — it handles the preflight itself. HEAD is optional but harmless to include.

Step 3: Configure Headers and Options

Check "Allow Credentials" if your API uses cookies or requires the Authorization header with session-based auth. Remember: credentials require a specific origin — wildcards are forbidden. Set Max Age to the number of seconds browsers should cache the preflight response; 86400 (1 day) is a safe default that reduces OPTIONS requests. Add custom headers your frontend sends in the request, and list any custom response headers your JavaScript code needs to read in "Expose Headers".

Step 4: Copy the Server Snippet

Switch between the nginx, Apache, Express.js, Flask, and .htaccess tabs to get a configuration snippet tailored to your server. Paste it into the appropriate server configuration file. For nginx, paste inside your server {} or location {} block. For Express, paste near the top of your app file before route definitions. For Flask, use the flask-cors package or add the headers manually in a before_request handler.

Common CORS Mistakes to Avoid

The most frequent CORS bugs are: (1) Using wildcards with credentials — browsers block this combination entirely. (2) Forgetting to handle OPTIONS preflight requests separately — your server must respond to OPTIONS with a 200 or 204. (3) Including a trailing slash in the origin — https://app.example.com/ is not the same as https://app.example.com. (4) A reverse proxy (CDN, load balancer) stripping your CORS headers before they reach the client — check the raw response headers in browser DevTools.

Frequently Asked Questions

What is CORS and why do I need these headers?

CORS (Cross-Origin Resource Sharing) is a browser security mechanism that restricts web pages from making requests to a different domain, port, or protocol than the one that served the page. When your frontend app at app.example.com calls an API at api.example.com, the browser blocks the request unless the server returns the correct Access-Control-Allow-Origin header. Without CORS headers, all cross-origin API calls will fail in modern browsers.

What is a CORS preflight request?

A preflight request is an OPTIONS request automatically sent by the browser before certain cross-origin requests (those using non-simple methods like PUT/DELETE, or custom headers like Authorization). The server must respond to the OPTIONS request with the appropriate Access-Control-Allow-Methods and Access-Control-Allow-Headers headers before the browser will send the actual request. If the preflight fails, the original request is never made.

Is it safe to use Access-Control-Allow-Origin: *?

Using a wildcard (*) allows any website to call your API, which is appropriate for truly public APIs like open data endpoints. However, it cannot be combined with Access-Control-Allow-Credentials: true — browsers block this combination. For private APIs or anything requiring authentication (cookies, Authorization headers), always specify the exact allowed origin(s) rather than using the wildcard.

What does the Access-Control-Max-Age header do?

Access-Control-Max-Age tells the browser how many seconds it can cache the preflight response. Caching preflight responses reduces the number of OPTIONS requests your server handles. A value of 86400 (1 day) means the browser only sends a preflight request once per day for the same URL. This can significantly improve performance for applications making frequent API calls.

How does Access-Control-Expose-Headers work?

By default, the browser only exposes a limited set of response headers to JavaScript (like Content-Type and Cache-Control). If your API returns custom headers like X-Request-ID or X-RateLimit-Remaining that your frontend code needs to read, you must list them in Access-Control-Expose-Headers. Otherwise, JavaScript calls to response.headers.get('X-Request-ID') will return null even though the header was sent.

Is this CORS generator free to use?

Yes, completely free. All CORS header generation happens in your browser using JavaScript. No data is sent to any server. You can generate as many CORS configurations as you need with no account, no signup, and no usage limits.

Why am I still getting CORS errors after adding headers?

Common causes include: the server not handling OPTIONS preflight requests (add a dedicated OPTIONS handler), the origin not exactly matching (including http/https and port number), missing headers in Access-Control-Allow-Headers that your request uses, or a CDN/proxy stripping headers before they reach the browser. Check the browser Network tab — the preflight response must return a 200 or 204 status with all required headers.