What is CORS and what problem does it solve?

CORS (Cross-Origin Resource Sharing) is the browser rule that decides whether JavaScript on one site may read a response from another origin. By default a page on https://app.example.com cannot read JSON from https://api.example.com because the origins differ. The server opts in by returning Access-Control-Allow-Origin. For example, sending Access-Control-Allow-Origin: https://app.example.com lets that one site read the response while every other site still gets blocked.

Can I use Access-Control-Allow-Origin with a wildcard *?

Yes for public read-only data, no when cookies or auth are involved. A response like Access-Control-Allow-Origin: * lets any site read it, which is fine for an open data API. But the moment you need credentials (cookies, HTTP auth, client certs) the browser refuses to combine * with Allow-Credentials true. In that case you must echo back the one calling origin, for example Access-Control-Allow-Origin: https://app.example.com, ideally validated against an allowlist.

Why can credentials not be combined with Allow-Origin *?

Because * means any website, and sending cookies to any website would let a malicious page read a logged-in user's private data. The spec forbids it: if Access-Control-Allow-Credentials is true, Access-Control-Allow-Origin must name a single concrete origin, never *. The browser throws an error such as the value of the Allow-Origin header must not be the wildcard when credentials mode is include. This tool shows that warning the instant you tick both.

What is the preflight OPTIONS request?

For anything beyond a simple GET or POST, the browser first sends an OPTIONS request to ask permission, called a preflight. The server answers with Access-Control-Allow-Methods and Access-Control-Allow-Headers listing what it permits. If your fetch sends a PUT with an Authorization header, the preflight must return both PUT in Allow-Methods and Authorization in Allow-Headers, otherwise the real request never fires. Access-Control-Max-Age tells the browser how many seconds it may cache this answer.

How do I add these CORS headers in Nginx?

Copy the Nginx block this tool generates into the relevant server or location section. Each line is an add_header directive, for example add_header Access-Control-Allow-Origin https://app.example.com always. The always flag matters so the header is sent on error responses too. For the preflight you also handle OPTIONS by returning 204 with the headers set. After editing, run nginx -t to test the config and reload with systemctl reload nginx.

What does Access-Control-Expose-Headers do?

By default client JavaScript can only read a short safelist of response headers (Cache-Control, Content-Type and a few others). If your API returns a custom header like X-Total-Count for pagination or X-Request-Id for tracing, the browser hides it from fetch unless you list it in Access-Control-Expose-Headers. For example Access-Control-Expose-Headers: X-Total-Count, X-Request-Id makes both readable via response.headers.get in the client code.

Let your SPA frontend call your API on another domain

Your React app on https://app.example.com calls an API on https://api.example.com and the console shows the classic blocked by CORS policy error. Set Access-Control-Allow-Origin to your app origin, tick GET, POST, PUT, DELETE, add Content-Type and Authorization to the allowed headers, turn on credentials so the session cookie rides along, and paste the generated block into Nginx. The preflight clears and the fetch finally returns data instead of an error.

Open a public read-only data API to everyone

You publish a free JSON endpoint that anyone may read from a browser (no cookies, no auth). Pick Allow-Origin * and limit methods to GET and OPTIONS. The tool keeps credentials off so the wildcard stays legal, and you get a one-line Nginx add_header or an Express cors() snippet that any client can hit without you maintaining an origin allowlist.

Fix a failing preflight on a PUT or DELETE request

A simple GET worked but switching to PUT with an Authorization header suddenly fails before the request even leaves the browser. That is the preflight. Add PUT to the methods and Authorization to the headers, set a Max-Age so the browser caches the answer for a day, copy the Apache Header set block into your vhost, and the OPTIONS preflight returns the permissions the browser was waiting for.

Expose a pagination header to client-side JavaScript

Your API returns X-Total-Count so the frontend can render page numbers, but response.headers.get('X-Total-Count') keeps returning null. Add it to Expose-Headers, regenerate, and paste the Express middleware. Now the browser stops hiding the header and the pagination widget reads the total straight off the response.

CORS Header Generator for Nginx, Apache and Express

Pick an origin, methods and headers, get Access-Control-* response headers as a raw list, Nginx, Apache or Express code

Runs locally
Category Developer & DevOps
Best for Formatting, validating, shrinking, or inspecting code-adjacent text.

What this tool does

Free CORS header generator that turns a few checkboxes into the exact Access-Control-* response headers a browser needs to allow cross-origin requests. Choose Access-Control-Allow-Origin (a wildcard * or one explicit scheme://host:port), tick the methods you actually serve (GET, POST, PUT, DELETE, PATCH, OPTIONS), pick the request headers you accept (Content-Type, Authorization, X-Requested-With and your own custom ones), and decide whether credentialed requests with cookies are allowed. The tool flags the one combination browsers reject outright: Allow-Credentials true together with Allow-Origin *. It also writes Access-Control-Max-Age to cache the preflight and Access-Control-Expose-Headers so client JavaScript can read response headers like X-Total-Count. Output comes in four ready-to-paste formats: a plain header list, an Nginx add_header block, an Apache Header set block and an Express middleware snippet. Everything runs in your browser, nothing is sent anywhere.

Tool details

Input: Text + Numbers; The page exposes text boxes, numeric controls, file pickers, or structured inputs depending on the tool.
Output: Live result + Copy + Preview; The result area focuses on usable output, with copy, download, or preview actions when supported.
Privacy: Browser-side processing; The main tool logic does not call an external API, so inputs normally stay in the current tab.
Save / share: Shareable URL state; Key settings are encoded in the URL so another person can reopen the same setup.
Performance budget: Initial JS <= 9 KB; No WASM budget is declared, keeping the tool quick to open on mobile.
Best fit: Developer & DevOps · Developer; Category and role tags drive related tools, internal links, and quick fit checks.

How to use

1. Input

Paste or drop your content into the tool panel.
2. Process

Click the button. All processing is local in your browser.
3. Copy / Download

Copy the result or download to disk in one click.

How CORS Header Generator fits into your work

Use it in the small gaps between coding, reviewing, debugging, and shipping.

Developer jobs

Formatting, validating, shrinking, or inspecting code-adjacent text.
Preparing snippets for documentation, tickets, commits, or handoff.
Checking a small payload quickly without switching tools.

Developer checks

Run irreversible transforms like minify or obfuscate on a copy.
Keep secrets out of pasted snippets unless the tool explicitly stays local.
Use your normal tests or linter before shipping transformed code.

Good next steps

These links move the current task into a more complete workflow.

Real-world use cases

Let your SPA frontend call your API on another domain
Your React app on https://app.example.com calls an API on https://api.example.com and the console shows the classic blocked by CORS policy error. Set Access-Control-Allow-Origin to your app origin, tick GET, POST, PUT, DELETE, add Content-Type and Authorization to the allowed headers, turn on credentials so the session cookie rides along, and paste the generated block into Nginx. The preflight clears and the fetch finally returns data instead of an error.
Open a public read-only data API to everyone
You publish a free JSON endpoint that anyone may read from a browser (no cookies, no auth). Pick Allow-Origin * and limit methods to GET and OPTIONS. The tool keeps credentials off so the wildcard stays legal, and you get a one-line Nginx add_header or an Express cors() snippet that any client can hit without you maintaining an origin allowlist.
Fix a failing preflight on a PUT or DELETE request
A simple GET worked but switching to PUT with an Authorization header suddenly fails before the request even leaves the browser. That is the preflight. Add PUT to the methods and Authorization to the headers, set a Max-Age so the browser caches the answer for a day, copy the Apache Header set block into your vhost, and the OPTIONS preflight returns the permissions the browser was waiting for.
Expose a pagination header to client-side JavaScript
Your API returns X-Total-Count so the frontend can render page numbers, but response.headers.get('X-Total-Count') keeps returning null. Add it to Expose-Headers, regenerate, and paste the Express middleware. Now the browser stops hiding the header and the pagination widget reads the total straight off the response.

Common pitfalls

Pairing Allow-Origin * with Allow-Credentials true. The browser rejects this combination outright and the request fails with a wildcard-not-allowed error. When you need cookies, echo back one concrete origin validated against an allowlist instead of the wildcard.
Forgetting to allow OPTIONS or the custom request headers. A PUT carrying Authorization triggers a preflight; if OPTIONS is not handled or Authorization is missing from Allow-Headers, the real request never fires even though your GET worked fine.
Dropping the always flag in Nginx add_header. Without it the CORS header is sent on 2xx responses but not on 4xx or 5xx, so the browser blocks the page from reading even the error body and your debugging gets much harder.

Privacy

Every header is assembled in plain JavaScript inside your browser tab. The origin, methods, custom headers and code snippets you generate never leave the page and nothing is logged. The one caveat: your selections are encoded into the shareable URL query string, so a link you paste into chat will record those options in the recipient server's access log. For an internal origin you would rather not publish, use the copy button and paste the text rather than sharing the URL.

FAQ

Tool combos

Folks in your role tend to reach for these alongside this tool.

Developer

Browse all tools for this role

CORS Header Generator for Nginx, Apache and Express

What this tool does

Tool details

How to use

1. Input

2. Process

3. Copy / Download

How CORS Header Generator fits into your work

Developer jobs

Developer checks

Good next steps

Real-world use cases

Let your SPA frontend call your API on another domain

Open a public read-only data API to everyone

Fix a failing preflight on a PUT or DELETE request

Expose a pagination header to client-side JavaScript

Common pitfalls

Privacy

FAQ

HTTP Header Extractor

CSP Policy Auditor

HTTP Security Header Auditor

robots.txt Generator

AI Eval Planner

Apache Cheatsheet

API Key Generator

API Rate Limit Cheatsheet

ASCII Table Generator

ASCII Table Reference

awk + sed Cheatsheet

AWS CLI Cheatsheet