Vad är CORS och hur hanterar du det i Node?

Question

Accepted Answer

**CORS** (Cross-Origin Resource Sharing) är en webbläsarens säkerhetsmekanism som styr om en webbsida från en **origin** kan göra förfrågningar till en server på en **annan origin**. Som standard blockerar webbläsare cross-origin-förfrågningar; servern måste uttryckligt tillåta dem via svarsheaders.

## Same-origin-principen och 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` som anropar ett API på `localhost:4000` är cross-origin — webbläsaren blockerar det om inte API:et väljer att tillåta det.

## De viktigaste svarsheaders

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

Servern kontrollerar åtkomsten genom att skicka dessa headers. Webbläsaren läser dem och avgör om den ska tillåta sidan att se svaret.

## Hantering av 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`-middleware sätter headers åt dig. I produktion bör du **begränsa `origin` till en allowlist** istället för `*` — och notera att att tillåta credentials (`credentials: true`) är inkompatibelt med wildcard-`*`.

## Preflight-förfrågningar

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

## Vanlig missuppfattning

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

## Varför det är viktigt

CORS är en av de vanligaste stolpestenarna inom webbutveckling — nästan varje front-end-till-API-konfiguration stöter på det (särskilt i lokal utveckling med olika portar).

Att förstå *varför* det finns (webbläsarens same-origin-säkerhet), hur servern väljer att tillåta det via headers, hur du konfigurerar det säkert (allowlist origins, försiktig hantering av credentials), och det kritiska faktum att det är en *webbläsar*-mekanism (inte API-auktorisering) är väsentligt för att korrekt och säkert ansluta front-ends till Node API:er utan att vara blockerad eller överexponera servern.