RunOfflineTools Logo RunOfflineTools
πŸ›‘οΈ HTTP Security & API Networking

CORS Preflight Simulator & Header Troubleshooter

Diagnose cross-origin errors in real time. Simulate the browser's exact preflight evaluation algorithm and generate one-click server configuration fixes.

+ Add Custom Headers (e.g. Authorization, x-api-key)
πŸ› οΈ

Ready-to-Paste Backend CORS Setup

Add cors middleware in your Express server for /api

// 1. Run in your backend terminal: npm install cors
// 2. Add to app.js or server.js:
const express = require('express');
const cors = require('cors');
const app = express();

// Enable CORS for your frontend
app.use(cors({
  origin: '*', // E.g. 'http://localhost:3000' or '*' to allow all during dev
  methods: ['GET', 'POST', 'OPTIONS'],
  allowedHeaders: ['Content-Type', 'Authorization'],
  credentials: false
}));

Demystifying Cross-Origin Resource Sharing (CORS)

Cross-Origin Resource Sharing (CORS) errors are among the most persistent points of friction for web developers. When your frontend application (hosted on http://localhost:3000 or https://app.yourdomain.com) makes an asynchronous HTTP request (via fetch() or axios) to an API hosted on a separate origin (https://api.yourdomain.com), the browser enforces strict security sandboxing known as the Same-Origin Policy.

The Anatomy of a Preflight Request (OPTIONS)

Before the browser transmits your actual API payload, it executes a preliminary handshake known as a preflight request using the HTTP OPTIONS verb. The preflight includes:

If your server fails to return explicit approval headers matching every requested attribute, the browser intercepts the transaction and displays the dreaded "Response to preflight request doesn't pass access control check" error in your DevTools console.

Common CORS Pitfalls & How to Avoid Them

  1. The Wildcard Credentials Trap: Setting Access-Control-Allow-Origin: * while sending HTTP cookies or withCredentials: true is forbidden by web standards. The server must echo back the exact origin.
  2. Neglecting the OPTIONS Route: In custom API routers, developers often create routes for POST /api/login but forget to respond to OPTIONS /api/login with an HTTP 200 or 204 status code.
  3. Missing Header Declarations: If your client sends Authorization: Bearer <token>, the server response must declare Authorization in Access-Control-Allow-Headers.

Frequently Asked Questions

What is CORS and why does the browser block my requests?

Cross-Origin Resource Sharing (CORS) is a browser security mechanism that restricts web pages from making HTTP requests to a different domain, port, or protocol than the one that served the web page, unless the remote server explicitly authorizes the origin via HTTP response headers.

What triggers a CORS preflight OPTIONS request?

Browsers automatically send a preflight OPTIONS request if the request uses HTTP methods other than GET, HEAD, or POST; if Content-Type is not application/x-www-form-urlencoded, multipart/form-data, or text/plain (e.g. application/json); or if custom headers like Authorization or x-api-key are present.

Why does Access-Control-Allow-Origin: * fail when credentials are true?

Under the W3C CORS specification, if a request includes credentials (cookies, HTTP basic auth, or client SSL certificates via withCredentials: true), the server cannot return a wildcard '*'. It must respond with the exact requesting origin (e.g., Access-Control-Allow-Origin: https://app.example.com) and set Access-Control-Allow-Credentials: true.

How do I fix 'No Access-Control-Allow-Origin header is present'?

Configure your backend server or reverse proxy (Express, FastAPI, Next.js, or Nginx) to inspect incoming request Origin headers and return the matching Access-Control-Allow-Origin header along with allowed HTTP methods and headers for both preflight OPTIONS and actual requests.

Does CORS protect backend servers or API databases from attacks?

No! CORS is strictly a client-side browser security standard to protect end-users from malicious cross-origin script execution. It does not stop server-to-server requests, cURL scripts, or Postman from querying your backend. Always protect private endpoints with proper server-side authentication (API keys, JWT, OAuth).

What does Access-Control-Max-Age do?

Access-Control-Max-Age indicates how many seconds the browser can cache the preflight OPTIONS response. Setting it to 86400 (24 hours) reduces unnecessary network latency by preventing the browser from re-sending OPTIONS on every subsequent API call.