CORS Tester & Debugger
Test CORS configuration online, diagnose browser cross-origin errors, inspect CORS headers, test preflight OPTIONS requests, and get actionable server fix recommendations.
Target server correctly allows this cross-origin request.
Public access granted to all origins without credentials.
CORS-safelisted method permitted by standard browser rules.
All requested headers are standard CORS-safelisted headers.
Request does not include cookies or authorization tokens.
Request qualifies as a CORS-safelisted simple request.
Only standard CORS-safelisted response headers (Content-Type, Cache-Control, etc.) are readable by JavaScript.
// Node.js Express CORS Configuration
import express from 'express';
import cors from 'cors';
const app = express();
app.use(cors({
origin: 'https://app.toolmono.com',
methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
allowedHeaders: ['Content-Type', 'Authorization', 'X-Requested-With'],
credentials: false,
maxAge: 86400,
}));
How to Use
1. What is CORS and How Does the Same-Origin Policy Work?
Cross-Origin Resource Sharing (CORS) is a browser security standard that allows servers to declare which external origins (combinations of protocol, host, and port) are permitted to read their HTTP responses.
Under the fundamental Same-Origin Policy (SOP), web browsers block scripts running on https://app.example.com from reading data retrieved via fetch() or XMLHttpRequest from https://api.example.com, unless the server explicitly grants cross-origin permission by returning appropriate HTTP response headers.
2. How to Test & Debug CORS Errors Online
Follow these steps to diagnose and debug CORS issues:
- Select Mode: Choose 1. Live CORS Test to execute real requests from your browser, 2. Preflight / OPTIONS Test to test preflight responses, or 3. CORS Header Analyzer to paste raw headers.
- Define Request: Enter your Target API URL, HTTP Method (GET, POST, PUT, DELETE), and Requesting Origin.
- Add Custom Headers: Add custom headers (e.g.
AuthorizationorContent-Type: application/json). - Review Preflight Badge: Check whether your request qualifies as a Simple Request or triggers an automated preflight OPTIONS call.
- Execute Test: Click Test CORS to send a direct browser request without server proxies.
- Inspect Decision Matrix: Review the visual matrix across Origin, Method, Headers, Credentials, and Exposed Response headers.
- Copy Server Fixes: Copy hardened configuration snippets for Node/Express, NGINX, Apache, or Cloudflare Workers.
3. Simple Requests vs. Preflighted (OPTIONS) Requests
Sent directly without an OPTIONS handshake. Requires method to be GET, HEAD, or POST with standard safelisted headers and Content-Type of text/plain, application/x-www-form-urlencoded, or multipart/form-data.
The browser automatically sends an OPTIONS request with Access-Control-Request-Method and Access-Control-Request-Headers before sending the actual request. Triggered by PUT, DELETE, PATCH, Authorization, or application/json.
4. Essential CORS Response Headers Explained
Specifies permitted requesting origins (* or exact URL).
Lists allowed HTTP methods on preflight responses (e.g. GET, POST, PUT, DELETE).
Lists permitted custom request headers (e.g. Authorization, Content-Type).
Enables cookie and auth token transmission cross-origin (true).
Exposes custom response headers (e.g. X-Total-Count) to client JavaScript.
Cache lifespan in seconds for preflight OPTIONS responses (e.g. 86400).
5. Access-Control-Allow-Origin: Specific Origins vs. Wildcard (*)
Using Access-Control-Allow-Origin: * is appropriate for completely public APIs (such as CDN assets, public package repositories, or public datasets). However, for authenticated enterprise APIs, servers should dynamically reflect the requesting Origin header against a trusted allowlist.
7. Access-Control-Allow-Methods & Allow-Headers Validation
During a preflight check, the browser inspects Access-Control-Allow-Methods and Access-Control-Allow-Headers. If any non-safelisted method (like DELETE) or non-safelisted header (like Authorization or X-API-Key) is omitted, the browser immediately cancels the request before the actual payload is transmitted.
8. Access-Control-Expose-Headers & Client-Side JavaScript Access
By default, browsers only permit client-side JavaScript to read CORS-safelisted response headers (Cache-Control, Content-Language, Content-Type, Expires, Last-Modified, Pragma). To access custom headers (such as X-Total-Count or X-RateLimit-Remaining), the server must explicitly expose them via Access-Control-Expose-Headers.
9. Preflight Caching (Access-Control-Max-Age) & Vary: Origin
Preflight OPTIONS calls add round-trip latency to every API call. Adding Access-Control-Max-Age: 86400 instructs the browser to cache preflight permissions for 24 hours. Furthermore, servers dynamically reflecting origins must set Vary: Origin to prevent shared CDN caches from returning Origin A permissions to Origin B.
10. Common CORS Errors and How to Fix Them
The server or reverse proxy is not configured to send CORS headers. Add the header to the response.
Add Authorization to Access-Control-Allow-Headers on the server.
Add DELETE to Access-Control-Allow-Methods on preflight OPTIONS handlers.
11. Diagnosing 'Failed to fetch': CORS vs. Network vs. Mixed Content
When a request fails, browsers return a generic TypeError: Failed to fetch. While CORS is the most common cause, network disconnects, invalid SSL/TLS certificates, DNS resolution failures, and Mixed Content blocks (requesting http:// from an https:// page) produce identical errors.
12. Server Configuration Examples (Express, NGINX, Apache)
import express from 'express';
import cors from 'cors';
const app = express();
app.use(cors({
origin: 'https://app.example.com',
credentials: true,
methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
allowedHeaders: ['Content-Type', 'Authorization'],
maxAge: 86400
}));13. Step-by-Step Practical CORS Debugging Example
Scenario: Frontend application calling REST API endpoint:
Client Origin: https://dashboard.example.com Request: POST /v1/orders (application/json + Authorization: Bearer ...) Server Returns: HTTP/2 204 No Content Access-Control-Allow-Origin: https://dashboard.example.com Access-Control-Allow-Methods: GET, POST Access-Control-Allow-Headers: Content-Type (Missing 'Authorization')
Result: Preflight failure. Browser aborts the POST call because Authorization is missing from Access-Control-Allow-Headers.
14. Real-World Frontend, API & Microservice Use Cases
Debug React, Next.js, and Vue API calls communicating with cross-origin microservices.
Verify that preflight caching (max-age) and allowed headers reduce API latency.
Validate NGINX and Cloudflare CORS rule transformations before production deployment.
15. 100% Direct Browser Fetch Guarantee (Zero Server Proxies)
ToolMono executes all live CORS requests directly from your browser using native JavaScript fetch(). ToolMono does not use server proxies to bypass or fake CORS behavior. All header parsing, matrix evaluations, and server snippets run 100% locally.
16. Authoritative References & Specifications
Consult official web standards and CORS specifications:
WHATWG Fetch Living Standard: CORS Specification
Authoritative web standard specification for the Cross-Origin Resource Sharing protocol.
MDN Web Docs: Cross-Origin Resource Sharing (CORS)
Comprehensive documentation of simple requests, preflight OPTIONS, and CORS headers.
W3C Cross-Origin Resource Sharing (CORS) Specification
Official W3C recommendation for cross-origin communication.
OWASP Cross-Origin Resource Sharing (CORS) Cheat Sheet
Industry security guidance for avoiding insecure origin reflections and credential leaks.
17. Frequently Asked Questions (20 FAQs)
Related Tools
Browse all toolsHTTP Headers Analyzer
Analyze HTTP response headers online, audit security headers (CSP, HSTS, CORS), inspect cookies, detect information disclosure, and review caching policies.
GraphQL Playground
Test GraphQL APIs online with an interactive query editor, variables, headers, schema introspection, documentation explorer, response viewer, and GraphQL error debugging.
GraphQL Response Analyzer
Analyze GraphQL API responses online. Inspect data, errors, response paths, null values, structure, and response statistics with a privacy-first browser-based analyzer.
.env Validator
Validate .env files, detect syntax errors, duplicate keys, empty values, potential secrets, compare environments, find missing variables, and review configuration drift.
JSON Schema Validator
Validate JSON data against a JSON Schema online with detailed errors, JSON paths, draft detection, and browser-based processing.
Webhook Tester
Generate a free temporary webhook URL to capture, inspect, and debug incoming HTTP payloads, headers, and JSON in real time. Replay requests instantly.
cURL to Code
Convert cURL commands and browser DevTools requests into clean, idiomatic code for JavaScript, Python, Node.js, Go, and PHP. 100% client-side with zero server uploads.