CORS (Cross-Origin Resource Sharing) is a browser security mechanism that restricts web pages from making requests to a different origin than the one that served the page. When your JavaScript at app.example.com tries to call api.example.com, the browser checks the API's response headers to see if the origin is allowed. Without the correct CORS headers, the browser blocks the response.

What is a preflight request?

A preflight request is an HTTP OPTIONS request that browsers automatically send before certain cross-origin requests. It checks whether the server permits the actual request method and headers. Browsers send a preflight when: the method is not GET, POST, or HEAD; custom headers are included; or the Content-Type is not simple (e.g., application/json triggers a preflight).

Can I use Access-Control-Allow-Origin: * with credentials?

No. The wildcard origin (*) cannot be used together with Access-Control-Allow-Credentials: true. This is a deliberate browser security restriction. If you need cookies or authentication headers in a cross-origin request, you must specify the exact origin in Access-Control-Allow-Origin and set Allow-Credentials to true.

What is the Access-Control-Max-Age header?

Access-Control-Max-Age specifies how many seconds the browser can cache the result of a preflight request. Setting a high value (e.g., 86400 = 24 hours) reduces the number of OPTIONS requests, improving performance. The default varies by browser but is typically very short. Chrome caps it at 2 hours; Firefox at 24 hours.

What headers does the browser send in a preflight?

The browser sends Origin (the requesting domain), Access-Control-Request-Method (the HTTP method the actual request will use), and Access-Control-Request-Headers (any custom headers the actual request will include). Your server must respond with matching Allow-Origin, Allow-Methods, and Allow-Headers headers, or the browser will block the actual request.

CORS Headers Generator

Configure Access-Control headers visually and get ready-to-paste code for Express, Nginx, Apache, and Flask.

Allowed Origins — which domains can call this API

Allowed Methods

Access-Control-Allow-Headers — request headers clients can send

Access-Control-Expose-Headers — response headers browsers can read

Access-Control-Max-Age — preflight cache (seconds)

Access-Control-Allow-Credentials: true — allows cookies and auth headers

Simulate an OPTIONS preflight request and see the expected server response based on your current configuration.

Request Origin

Request Method

Request Headers

CORS Flow Explained

1. Browser sends preflight (OPTIONS) Sends Origin, Access-Control-Request-Method, and Access-Control-Request-Headers to the server.

2. Server responds to preflight Must include Access-Control-Allow-Origin, Allow-Methods, Allow-Headers. May include Max-Age for caching.

3. Browser sends actual request If preflight succeeded, the browser sends the real GET/POST/etc. with the Origin header.

4. Server responds with CORS headers again The actual response must also include Access-Control-Allow-Origin (and Allow-Credentials if applicable).

Headers Reference

Header	Direction	Description
Access-Control-Allow-Origin	Response	Allowed origins. * for all, or specific URL.
Access-Control-Allow-Methods	Preflight Response	Comma-separated list of allowed HTTP methods.
Access-Control-Allow-Headers	Preflight Response	Headers the client is allowed to send.
Access-Control-Expose-Headers	Response	Response headers the browser JS can read.
Access-Control-Max-Age	Preflight Response	Seconds to cache preflight result.
Access-Control-Allow-Credentials	Response	Allow cookies/auth. Incompatible with * origin.
Origin	Request	Sent by browser on cross-origin requests.
Access-Control-Request-Method	Preflight Request	Method the actual request will use.
Access-Control-Request-Headers	Preflight Request	Headers the actual request will include.

Configure origins and methods above to generate CORS headers.

Output

Configure options above to generate code.

How to Use the CORS Header Builder

Simple mode — Enter the allowed origin (or click Allow All for *), select the HTTP methods, and copy the generated headers.
Advanced mode — Configure additional headers: Allow-Headers for custom request headers, Expose-Headers for response headers your client reads, Max-Age to cache the preflight, and the Allow-Credentials flag.
Preflight Check — Enter the request origin, method, and headers your client sends, then click Simulate Preflight to see exactly what your server needs to respond with.
Copy code snippets — Switch between Express.js, Nginx, Apache, and Flask tabs to get ready-to-paste server configuration for your stack.

What Is CORS and Why Does It Exist?

CORS (Cross-Origin Resource Sharing) is a browser-enforced security policy. By default, web pages can only make JavaScript fetch/XHR requests to the same origin (protocol + domain + port) that served the page. This is the Same-Origin Policy (SOP), which prevents a malicious page from silently reading data from your bank's API using your session cookies. CORS is an opt-in mechanism that allows servers to explicitly grant permission to specific origins, relaxing the SOP in a controlled way. CORS headers are only enforced by browsers — server-to-server calls are unaffected.

Simple Requests vs. Preflighted Requests

Not all cross-origin requests trigger a preflight. A "simple request" (GET, POST, or HEAD with only allowed headers and simple Content-Types) is sent directly. The browser checks the response's CORS headers afterward. For anything more complex — PUT, PATCH, DELETE, custom headers, or JSON Content-Type — the browser first sends an OPTIONS preflight request asking the server for permission. The server must respond positively before the browser sends the actual request. Use the Preflight Check tab to simulate this flow. Complement your CORS policy with a Content Security Policy for defence in depth.

Common CORS Mistakes

The most common mistake is setting Access-Control-Allow-Origin: * alongside Access-Control-Allow-Credentials: true. Browsers reject this combination because allowing all origins with credentials would enable any site to make authenticated requests as you. Another common mistake is returning CORS headers only on the successful response but not on error responses — browsers check CORS headers before presenting the response body, so a 401 or 500 without CORS headers will appear as a network error in JavaScript. Always add CORS headers to every response from cross-origin endpoints, including error responses.

Dynamic Origin Validation

For APIs that need to support multiple specific origins, implement dynamic origin validation on the server: check the incoming Origin header against an allowlist, and if it matches, reflect that origin in the Access-Control-Allow-Origin response header. This approach avoids the wildcard while supporting multiple trusted origins. Also add Vary: Origin to your response to prevent proxy caches from serving a cached CORS response with the wrong origin to a different client. See the Subnet Calculator if you need to plan network-level access controls alongside CORS.

Frequently Asked Questions

CORS (Cross-Origin Resource Sharing) is a browser security mechanism that restricts web pages from making requests to a different origin. When your JavaScript at app.example.com calls api.example.com, the browser checks the API's response headers to see if the origin is allowed. Without correct CORS headers, the browser blocks the response.

A preflight is an HTTP OPTIONS request that browsers automatically send before certain cross-origin requests. It checks whether the server permits the method and headers. Browsers send preflights when: the method is not GET/POST/HEAD, custom headers are included, or Content-Type is not a simple type (e.g., application/json triggers a preflight).

No. Wildcard origin (*) cannot be used with Access-Control-Allow-Credentials: true. This is a deliberate browser security restriction. If you need cookies or auth headers in cross-origin requests, specify the exact origin and set Allow-Credentials to true.

Max-Age specifies how many seconds the browser caches the preflight result. A high value (e.g., 86400 = 24 hours) reduces OPTIONS requests and improves performance. Chrome caps it at 2 hours; Firefox at 24 hours.

The browser sends: Origin (the requesting domain), Access-Control-Request-Method (the HTTP method the actual request will use), and Access-Control-Request-Headers (any custom headers). Your server must respond with matching Allow-Origin, Allow-Methods, and Allow-Headers headers.