Cross-Origin Resource Sharing — The Developer's Quick Debugging Guide

API working in Postman but failing in the browser?

Seeing CORS error in DevTools?

Don't randomly add Access-Control-Allow-Origin: *.

Use this checklist to find the actual problem.

1. 🧠 What is CORS?

CORS = Cross-Origin Resource Sharing

CORS is a browser-enforced mechanism that allows a server to specify which origins are permitted to access its resources from browser-based JavaScript.

The browser uses CORS headers to decide whether a cross-origin response can be exposed to frontend JavaScript. (MDN Web Docs)

Simple mental model

Frontend
   │
   │  Request
   ▼
┌─────────────────┐
│     BROWSER     │
│   CORS CHECK    │
└────────┬────────┘
         │
         ▼
     API SERVER

Think of the browser as a security checkpoint.

The server has to tell the browser:

"Yes, this origin is allowed to access my response."

2. 🌍 What is an Origin?

An origin consists of:

PROTOCOL + DOMAIN + PORT

Example:

<https://app.example.com:3000>

Component	Example
Protocol	`https`
Domain	`app.example.com`
Port	`3000`