Co je CORS a jak jej řešíte v Node?

Question

Accepted Answer

**CORS** (Cross-Origin Resource Sharing) je bezpečnostní mechanismus prohlížeče, který určuje, zda může webová stránka z jedné **origin** odesílat požadavky na server v **jiné origin**. Ve výchozím nastavení prohlížeč blokuje požadavky mezi jednotlivými zdroji; server je musí explicitně povolit prostřednictvím hlaviček odpovědi.

## Zásada stejného zdroje a problém

```text
Origin = scheme + host + port. These are DIFFERENT origins:
  https://app.example.com   →  https://api.example.com   (different host)
  http://localhost:3000     →  http://localhost:4000      (different port)

Browser blocks the cross-origin request UNLESS the server sends CORS headers allowing it.
```

Takže React aplikace na `localhost:3000` volající API na `localhost:4000` je cross-origin — prohlížeč to zablokuje, pokud API nevyjádří souhlas.

## Klíčové hlavičky odpovědi

```text
Access-Control-Allow-Origin: https://app.example.com   ← who is allowed
Access-Control-Allow-Methods: GET, POST, PUT, DELETE   ← allowed methods
Access-Control-Allow-Headers: Content-Type, Authorization
Access-Control-Allow-Credentials: true                 ← allow cookies/auth
```

Server řídí přístup odesláním těchto hlaviček. Prohlížeč je čte a rozhoduje, zda stránce povolí vidět odpověď.

## Řešení CORS v Express

```js
import cors from "cors";

// ❌ allow everything — convenient but insecure for credentialed/private APIs
app.use(cors());

// ✅ restrict to specific trusted origins
app.use(cors({
  origin: ["https://app.example.com", "http://localhost:3000"], // allowlist
  methods: ["GET", "POST", "PUT", "DELETE"],
  credentials: true, // allow cookies — REQUIRES a specific origin (not "*")
}));
```

Middleware `cors` pro vás nastaví hlavičky. V produkci **omezte `origin` na seznam povolených** místo `*` — a uvědomte si, že povolení pověření (`credentials: true`) je nekompatibilní se zástupným znakem `*`.

## Preflight požadavky

```text
For "non-simple" requests (PUT/DELETE, custom headers, JSON), the browser first
sends an OPTIONS "preflight" request to check permissions. The cors middleware
handles responding to it automatically.
```

## Běžná mylná představa

```text
CORS is enforced by the BROWSER, not the server. It does NOT protect your API
from non-browser clients (curl, Postman, other servers) — those ignore CORS.
It only governs what browser JavaScript on other origins can do.
```

## Proč je to důležité

CORS je jedním z nejčastějších problémů ve vývoji webu — téměř každá konfigurace front-end-to-API se s ním setkává (zvláště v lokálním vývoji s různými porty).

Porozumění *proč* existuje (bezpečnost same-origin v prohlížeči), jak server souhlasí prostřednictvím hlaviček, jak ji bezpečně nakonfigurovat (whitelist origin, opatrné nakládání s pověřením) a zásadní skutečnost, že se jedná o mechanismus *prohlížeče* (nikoli autorizace API), je nezbytné pro správné a bezpečné připojení front-end k Node API bez blokování nebo nadměrného vystavování serveru.