Wat is CORS en hoe handel je dit af in Node?

Question

Accepted Answer

**CORS** (Cross-Origin Resource Sharing) is een beveiligingsmechanisme van de browser dat bepaalt of een webpagina van de ene **origin** verzoeken kan indienen bij een server op een **ander origin**. Standaard blokkeren browsers cross-origin-verzoeken; de server moet deze expliciet toestaan via response headers.

## Het same-origin-beleid en het probleem

```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.
```

Dus een React-app op `localhost:3000` die een API aanroept op `localhost:4000` is cross-origin — de browser blokkeert dit tenzij de API daarvoor kiest.

## De sleutel response headers

```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
```

De server beheerst de toegang door deze headers te sturen. De browser leest ze en bepaalt of de pagina het response mag zien.

## CORS afhandelen in 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 "*")
}));
```

De `cors`-middleware stelt de headers voor je in. Voor productie, **beperk `origin` tot een whitelist** in plaats van `*` — en let op dat het toestaan van credentials (`credentials: true`) incompatibel is met het jokerteken `*`.

## Preflight-verzoeken

```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.
```

## Veel voorkomend misverstand

```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.
```

## Waarom het belangrijk is

CORS is een van de meest voorkomende struikelblokken in webontwikkeling — bijna elke front-end-naar-API-instellingen stuit hierop (vooral in lokale development met verschillende poorten).

Begrijpen *waarom* het bestaat (browserbeveiliging same-origin), hoe de server zich aanmeldt via headers, hoe je het veilig configureert (whitelist origins, voorzichtige credential handling), en het cruciaal feit dat het een *browser*-mechanisme is (geen API-autorisatie) is essentieel om front-ends correct en veilig aan Node API's te koppelen zonder geblokkeerd te worden of de server te veel bloot te stellen.