How do I fix a CORS error?

To fix a CORS error, add the correct Access-Control-Allow-Origin header to your server response. If you're using custom headers or non-simple methods like PUT or DELETE, also add Access-Control-Allow-Methods and Access-Control-Allow-Headers. Use CORS Tester to see exactly which headers are missing.

What is the difference between CORS and CSRF?

CORS (Cross-Origin Resource Sharing) is a browser security mechanism that restricts which origins can read responses from cross-origin requests. CSRF (Cross-Site Request Forgery) is an attack where a malicious site tricks a user's browser into making requests to another site where the user is authenticated. CORS headers can limit who reads responses; CSRF tokens prevent unauthorized state-changing requests.

How do I enable CORS in Cloudflare Workers?

In your Cloudflare Worker, add CORS headers to every response: response.headers.set('Access-Control-Allow-Origin', '*'). For preflight requests, handle the OPTIONS method explicitly and return a 200 response with Access-Control-Allow-Methods and Access-Control-Allow-Headers. Cloudflare does not add CORS headers automatically — your Worker script must handle them.

What is the difference between simple and preflighted requests?

Simple requests use methods GET, POST, or HEAD with only standard headers (Content-Type limited to text/plain, application/x-www-form-urlencoded, or multipart/form-data) and do not trigger a preflight. Preflighted requests use methods like PUT, DELETE, PATCH, or include custom headers like Authorization or Content-Type: application/json — these cause the browser to send an OPTIONS request first to verify server permissions.

How do I fix CORS with credentials/cookies?

Set Access-Control-Allow-Credentials: true on the server and Access-Control-Allow-Origin to the exact frontend origin (not *). On the client side, set credentials: 'include' in your fetch call, or withCredentials: true in Axios. All three conditions must be met simultaneously — missing any one will cause the browser to block the credentialed request.

All tools

CORS Tester

Simulate preflight OPTIONS and real requests, inspect CORS headers, and catch misconfigurations — in your browser. No request data stored.

100% in-browserNo signupFree forever

Runs in your browserNo API data storedNo request history saved

Request builder

Quick test with public APIs

Target URL

Origin (for preflight / cURL)

Actual request uses this page's origin

Method

Include credentials (cookies, Authorization)

Custom headers

Request is sent from this page's origin. Results show CORS headers and security analysis.

Request flow

BrowserPreflight OPTIONSGET requestResponse

Non-simple request: browser will send OPTIONS first, then GET if allowed.

Preflight (OPTIONS) cURL

curl -X OPTIONS "https://api.example.com/users" \
  -H "Origin: https://example.com" \
  -H "Access-Control-Request-Method: GET" \
  -H "Access-Control-Request-Headers: Content-Type" \
  -v

Actual request cURL

curl -X GET "https://api.example.com/users" \
  -H "Origin: https://example.com" \
  -H "Content-Type: application/json" \
  -v

Requests run from your browser. No data is stored or sent to our servers.

cURL Converter JWT Decoder

What Is CORS and Why Does It Matter?

The Same Origin Policy is a fundamental browser security rule: a web page at https://myapp.com cannot read responses from a different origin like https://api.example.com unless that server explicitly allows it. Cross-Origin Resource Sharing (CORS) is the mechanism that lets servers grant those permissions via HTTP response headers. When the browser detects a cross-origin request, it checks for headers like Access-Control-Allow-Origin — if they are missing or incorrect, the browser blocks the response and you see a CORS error in the console. CORS misconfigurations are among the most common issues developers hit when building frontend applications that talk to external APIs.

Preflight requests add another layer: for non-simple requests (those using custom headers, or methods like PUT, DELETE, or PATCH), the browser first sends an OPTIONS request to ask the server what it allows. The server must respond with the correct Access-Control-Allow-Methods and Access-Control-Allow-Headers before the browser will send the real request. CORS Tester simulates both the preflight and the actual request so you can debug the full flow without leaving your browser.

How it works

Test CORS in 3 Steps

Enter a URL

Paste your API endpoint into the Target URL field. Set a custom origin if you want to simulate requests from a specific domain.

Choose method & headers

Select GET, POST, PUT, DELETE, or OPTIONS. Add custom request headers and toggle credentials to test the exact scenario that is failing.

Run the test

Click Run test. The tool sends the request from your browser, showing all CORS response headers, a security analysis score, and generated cURL commands for both preflight and actual requests.

Review & fix

Inspect which headers are present or missing, check the security score for misconfigurations, and copy the cURL to reproduce the issue in your terminal or share with backend devs.

Use cases

When Developers Test CORS

🚫

Debug browser CORS errors

Reproduce the exact cross-origin request that is failing and see which CORS headers are missing or misconfigured.

✈️

Verify preflight handling

Check that your server responds correctly to OPTIONS requests with the right Allow-Methods and Allow-Headers before the real request is sent.

🌐

Test CDN and cache headers

Confirm that a CDN or reverse proxy is not stripping CORS headers and that Access-Control-Max-Age is set to reduce preflight traffic.

🔧

Validate API gateway config

Verify that AWS API Gateway, Cloudflare Workers, or Nginx is returning CORS headers correctly for each environment (staging, production).

🔑

OAuth redirect debugging

Test CORS behavior for OAuth token endpoints and callback URLs where credentials and specific origins must be explicitly allowed.

🔗

Third-party API integration

Before building a frontend integration, confirm that the third-party API allows requests from your domain and returns the correct headers.

CORS Headers Reference

These are the standard response headers a server sends to control cross-origin access. All are checked by CORS Tester automatically.

Header	Purpose	Example value
Access-Control-Allow-Origin	Specifies which origins may read the response	https://myapp.com
Access-Control-Allow-Methods	Lists the HTTP methods permitted for cross-origin requests	GET, POST, PUT, DELETE
Access-Control-Allow-Headers	Lists the request headers the server will accept	Content-Type, Authorization
Access-Control-Allow-Credentials	Allows cookies and Authorization headers to be sent cross-origin	true
Access-Control-Max-Age	How long (in seconds) the browser may cache the preflight response	86400
Access-Control-Expose-Headers	Headers the browser is allowed to expose to client-side JavaScript	X-Request-Id, X-Rate-Limit

FAQ

Frequently Asked Questions

1What is a CORS error and why does it happen?

A CORS error occurs when your browser blocks a cross-origin request because the server's response headers do not allow it. The most common cause is a missing or incorrect Access-Control-Allow-Origin header. The browser enforces this — the server still receives and processes the request, but the response is hidden from your JavaScript.

2How do I fix the "No Access-Control-Allow-Origin" error?

Add Access-Control-Allow-Origin: https://yourdomain.com (or * for public APIs) to your server's response headers. If you also send custom headers or use non-simple methods, add Access-Control-Allow-Methods and Access-Control-Allow-Headers. Use CORS Tester to confirm exactly which headers are missing before making changes.

3What is a CORS preflight request and when does it happen?

A preflight is an automatic OPTIONS request the browser sends before any non-simple cross-origin request. It is triggered when you use methods like PUT, DELETE, or PATCH, or when you include custom headers like Authorization or Content-Type: application/json. The server must respond with the correct Access-Control-Allow-* headers or the actual request will not be sent.

4Can I use credentials (cookies or Authorization) with CORS?

Yes, but you must set Access-Control-Allow-Credentials: true on the server and specify an explicit origin in Access-Control-Allow-Origin — you cannot use * when credentials are involved. On the client side, set credentials: 'include' in your fetch call. CORS Tester lets you toggle credentials on and flags the wildcard+credentials misconfiguration automatically.

5What is the difference between CORS and using a proxy?

CORS is enforced by the browser: the request still reaches the server, but the browser hides the response if headers are missing. A proxy (e.g. your own backend or a CORS proxy service) forwards the request server-side, bypassing browser enforcement entirely. Proxies are a common workaround during development, but the correct production fix is adding proper CORS headers on the target server.

6Why does CORS work in Postman but not the browser?

Postman is not a browser and does not enforce the Same Origin Policy, so it sends requests regardless of CORS headers. Browsers enforce CORS strictly — if the server does not return the correct Access-Control-Allow-Origin header, the browser blocks the response even though the server received and processed the request. The fix must always be made on the server side.

7How do I fix CORS in Express.js?

Install the cors npm package and add it as middleware: app.use(cors({ origin: 'https://yourfrontend.com' })). For credentials, also set credentials: true. You can whitelist multiple origins using a function for the origin option. Always restart your server after changes and verify with CORS Tester.

8How do I allow all origins in CORS (and is it safe)?

Setting Access-Control-Allow-Origin: * allows any origin to read responses, which is safe for fully public APIs with no authentication. However, wildcard origins cannot be combined with Access-Control-Allow-Credentials: true — browsers will block such responses. For authenticated APIs, always specify exact allowed origins.

9How do I test CORS from the command line with curl?

Run:

curl -H 'Origin: https://yourfrontend.com' -H 'Access-Control-Request-Method: GET' -X OPTIONS -v https://api.example.com/endpoint

. The -v flag shows all response headers. Look for Access-Control-Allow-Origin in the output — its presence and value determine whether the browser would allow the request.

10Why does CORS error only happen in production?

In development, many frameworks proxy API requests through the dev server (e.g. Vite, Create React App) to the same origin, bypassing CORS entirely. In production, the frontend and API are on different domains, so CORS headers are required. Check that your production server returns the same CORS headers your dev proxy was silently adding.

11How do I fix CORS in AWS API Gateway?

In the AWS Console, open your API Gateway, select the resource, and enable CORS under Actions → Enable CORS. This adds the Access-Control-Allow-Origin, Access-Control-Allow-Methods, and Access-Control-Allow-Headers headers to the OPTIONS response. For Lambda integrations, your Lambda function must also return CORS headers in its response.

12What does Access-Control-Max-Age do?

Access-Control-Max-Age specifies how many seconds the browser may cache the preflight response. For example, Access-Control-Max-Age: 86400 allows the browser to skip the OPTIONS preflight for 24 hours for the same request pattern. This reduces latency and server load by avoiding redundant preflight round-trips.

Learn more

Developer Guides

📖Fix CORS Policy Error 📖Failed to Fetch Fix 📖Postman vs Browser

Feedback for cors_tester

Tell us what's working, what's broken, or what you wish we built next — it directly shapes our roadmap.

You make the difference

Good feedback is gold — a rough edge you hit today could be smoother for everyone tomorrow.

Feature ideas often jump the queue when lots of you ask.
Bug reports with steps get fixed faster — paste URLs or examples if you can.
Name and email are optional; we won't use them for anything except replying if needed.

Stay Updated

Get the latest tool updates, new features, and developer tips delivered to your inbox.

What you'll get

Product updates & new tools
JSON, API & developer tips
Unsubscribe anytime — no hassle

Get in touch

Feature ideas, bugs, or a quick thanks — we read every message.

support@unblockdevs.com