CORS Header Generator
Paste a browser CORS error or set origins, methods, and credentials. Copy Access-Control headers or Nginx, Express, and Next.js config — entirely in your browser.
What does a CORS Header Generator do?
A CORS header generator turns an allowed-origin, method, request-header, credentials, and preflight-cache policy into copy-ready CORS response headers. You can paste a browser “blocked by CORS policy” error and apply a suggested policy, or set the fields yourself. Browsers enforce those headers; the server must send them on the real response and on OPTIONS preflight.
What “blocked by CORS policy” means
Chrome prints Access to fetch … has been blocked by CORS policy when the page origin is not allowed to read the API response. The usual causes are a missing Access-Control-Allow-Origin header, an origin that does not match the page, * used with credentials, a failed OPTIONS preflight, or a request header that was not listed in Access-Control-Allow-Headers. The generator maps those console phrases to a valid header set. It does not fetch your API.
Why Access-Control-Allow-Origin is missing
“No Access-Control-Allow-Origin header is present” means the browser never saw ACAO on the response it received. Common reasons: CORS is configured on a different path, OPTIONS returns 404, a proxy strips the header, or only the JSON route is decorated and preflight is not. Put the generated header on the exact URL the console named — including OPTIONS.
How to use the CORS Header Generator
- Paste the browser error or enter the origin. Drop in a blocked-by-CORS-policy message, or use *, one origin, or an allowlist.
- Select allowed methods. Include OPTIONS if clients will send non-simple requests.
- Add request headers. List headers the browser will send, such as Authorization.
- Enable credentials when required. Do not combine credentials with a wildcard origin.
- Set preflight cache time. Choose Access-Control-Max-Age in seconds.
- Choose the output format. Copy HTTP headers or Nginx, Apache, Express, Next.js, Vercel, Flask, or Workers config.
- Copy the generated configuration. Paste it onto the API response path that browsers actually call.
- Check the policy locally, then in your app. The simulator is local only. Confirm with a real browser request.
How CORS header generation works
There is no formula. The generator maps a policy to response fields: Access-Control-Allow-Origin, Allow-Methods, Allow-Headers, Allow-Credentials, Expose-Headers, Max-Age, and Vary: Origin when the returned origin depends on the request. Invalid combinations — especially * with credentials, or multiple origins in one ACAO header — are rejected instead of copied.
CORS headers explained
- Access-Control-Allow-Origin
- One origin, or * without credentials. Never a comma-separated list.
- Access-Control-Allow-Methods
- Methods allowed after preflight. * is not a wildcard on credentialed responses.
- Access-Control-Allow-Headers
- Request headers the browser may send. Authorization must be listed explicitly.
- Access-Control-Expose-Headers
- Response headers JavaScript may read. Different from Allow-Headers.
- Access-Control-Allow-Credentials
- Set true only when cookies or other credentials are included. Omit it otherwise.
- Access-Control-Max-Age
- Seconds the browser may cache the preflight result.
Real-world examples
Public API
Origin *, methods GET and OPTIONS, no credentials. HTTP includes Access-Control-Allow-Origin: * and no Allow-Credentials header.
React frontend + API
Frontend https://app.example.com calling https://api.example.com with POST JSON and Authorization triggers a preflight. Allow that origin, GET/POST/OPTIONS, Content-Type and Authorization.
Cookie-based API
Use an explicit origin and Allow-Credentials. A wildcard origin is invalid here — load the Cookies / login preset to see the blocked * + credentials state.
Localhost development
http://localhost:3000 is a different origin from another port. Allow that exact origin; * still cannot be used if you send cookies.
CORS headers for Nginx, Express, Next.js, Vercel, and Flask
The same policy is emitted as HTTP headers, Nginx add_header, Apache Header always set, Express cors(), Next.js headers() or middleware, Vercel headers in vercel.json, Flask-CORS, or Cloudflare Workers. Multiple origins become an allowlist that reflects the request Origin — not Access-Control-Allow-Origin: https://a.com, https://b.com. Use the HTTP Header Generator for non-CORS headers, and the cURL to Fetch Converter to replay a request in the browser.
Common CORS configuration mistakes
- Using
*with credentials. - Forgetting OPTIONS so preflight never gets these headers.
- Omitting a custom request header from Allow-Headers.
- Confusing Allow-Headers (request) with Expose-Headers (response).
- Putting multiple origins in one Access-Control-Allow-Origin value.
- Treating CORS as authentication or authorization.
- Returning CORS headers on a path the browser does not call.
- Reflecting Origin without Vary: Origin, so caches mix responses.
When to use this generator
- Reading a “blocked by CORS policy” or missing Access-Control-Allow-Origin error.
- Connecting a React or Next.js frontend to another origin.
- Localhost on one port calling an API on another.
- Writing Nginx, Express, Vercel, or Flask CORS policies.
- Handling cookie or other credentialed browser requests.
- Documenting an OPTIONS preflight response.
Common ways developers search for CORS headers
People look for a CORS header builder when Chrome says the request was blocked by CORS policy, when Access-Control-Allow-Origin is missing, or when they need paste-ready CORS headers for Nginx or Express. Those are the same policy — this page owns generating that configuration, not live remote testing or a CORS proxy.
Related developer tools
- HTTP Header Generator
Build other request or response headers beyond CORS.
- cURL to Fetch Converter
Turn a curl command into fetch() to test the same origin and headers in the browser.
- API Mock Generator
Draft a mock API response while you wire CORS on the real server.
- JSON Formatter
Inspect JSON bodies that often trigger a CORS preflight via Content-Type.
- API Key Generator
Create test API keys — CORS is not a substitute for authentication.
Frequently asked questions
What does blocked by CORS policy mean?
The browser refused to let page JavaScript read a cross-origin response. Chrome prints “blocked by CORS policy” when Access-Control-Allow-Origin is missing, does not match the page, or conflicts with credentials. Postman will not show this because it is not a browser.
Why is there no Access-Control-Allow-Origin header?
The API never sent it, sent it on a different path, or only sent it after a failed OPTIONS. The header must appear on the exact response the browser received, including preflight.
What is a CORS header?
A CORS header is an HTTP response field such as Access-Control-Allow-Origin that tells a browser whether script on another origin may read the response.
What does Access-Control-Allow-Origin do?
It names the single origin that may read the response, or * for any origin on non-credentialed requests. It cannot list multiple origins in one header.
Can Access-Control-Allow-Origin use * with credentials?
No. Credentialed responses must echo one explicit origin. This generator blocks copy when * and credentials are combined.
What is a CORS preflight request?
For non-simple cross-origin requests, the browser sends OPTIONS with Access-Control-Request-Method and Access-Control-Request-Headers before the real request.
Which headers are needed for a CORS preflight?
The OPTIONS response typically needs Allow-Origin, Allow-Methods, Allow-Headers, and Max-Age. Add Allow-Credentials and Vary: Origin when those apply.
What does Access-Control-Allow-Headers do?
It lists request headers the browser may send after preflight. Authorization is never covered by * and must be named.
What does Access-Control-Expose-Headers do?
It lists response headers that JavaScript may read. It is not the same as Allow-Headers, which applies to the request.
What does Access-Control-Max-Age do?
It is how long, in seconds, a browser may cache the preflight result. Browser-specific caps still apply.
Do I need CORS headers for GET requests?
Cross-origin GET can skip preflight when it stays simple, but the browser still needs Allow-Origin (and credentials rules) before script can read the body.
Why does my CORS request work in Postman but fail in the browser?
Postman is not a browser and does not enforce CORS. The API must return CORS headers for the page origin that calls it.
Can I allow multiple origins with Access-Control-Allow-Origin?
Not as a comma-separated list. The server must check Origin against an allowlist and return that one origin, usually with Vary: Origin.
How do I add CORS headers in Nginx, Express, or Next.js?
Use the matching output tab. Nginx uses add_header, Express uses cors() middleware, and Next.js uses headers() or middleware when you must reflect Origin. Vercel and Flask snippets are included for the same policy.
Does this CORS Header Generator test a live API?
No. It generates headers and runs a local policy check in your browser. It does not proxy requests or replace a real browser call to your API.
Is CORS a security feature?
CORS relaxes the same-origin policy for chosen origins. It is not authentication or authorization and does not protect an API by itself.