Hvad er CORS og hvordan håndteres det i Node?

Question

Accepted Answer

**CORS** (Cross-Origin Resource Sharing) er en browser-sikkerhedsmekanisme, der styrer, om en webside fra ét **origin** kan foretage anmodninger til en server på et **forskelligt origin**. Som standard blokerer browsere cross-origin-anmodninger; serveren skal eksplicit tillade dem via svarhovedbeskeder.

## Same-origin-politikken og problemet

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

Så en React-app på `localhost:3000`, der kalder et API på `localhost:4000`, er cross-origin — browseren blokerer det, medmindre API'et tillader det.

## De vigtigste svarhovedbeskeder

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

Serveren styrer adgangen ved at sende disse hoveddele. Browseren læser dem og beslutter, om siden må se svaret.

## Håndtering af CORS i 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 "*")
}));
```

`cors`-middlewaren sætter hoveddele for dig. Til produktion **begræns `origin` til en whitelist** i stedet for `*` — og bemærk, at tilladelse af legitimationsoplysninger (`credentials: true`) er uforenelig med wildcard `*`.

## Preflight-anmodninger

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

## Almindelig misforståelse

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

## Hvorfor det betyder noget

CORS er en af de mest almindelige problemer i webudvikling — næsten alle front-end-to-API-opsætninger støder på det (især i lokal udvikling med forskellige porte).

At forstå *hvorfor* det findes (browser same-origin-sikkerhed), hvordan serveren tillader det via hoveddele, hvordan det konfigureres sikkert (whitelist-origins, forsigtig håndtering af legitimationsoplysninger) og det vigtige faktum, at det er en *browser*-mekanisme (ikke API-autorisering), er afgørende for korrekt og sikkert at forbinde front-ends til Node API'er uden at blive blokeret eller overexponere serveren.