Cos'è CORS e come lo gestisci in Node?

Question

Accepted Answer

**CORS** (Cross-Origin Resource Sharing) è un meccanismo di sicurezza del browser che controlla se una pagina web da un **origin** può effettuare richieste a un server su un **origin diverso**. Per impostazione predefinita, i browser bloccano le richieste cross-origin; il server deve consentirle esplicitamente tramite header di risposta.

## La policy same-origin e il problema

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

Quindi un'app React su `localhost:3000` che chiama un'API su `localhost:4000` è cross-origin — il browser la blocca a meno che l'API non opti per consentirla.

## Gli header di risposta chiave

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

Il server controlla l'accesso inviando questi header. Il browser li legge e decide se consentire alla pagina di vedere la risposta.

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

Il middleware `cors` imposta gli header per te. Per la produzione, **limita `origin` a una whitelist** piuttosto che a `*` — e tieni presente che consentire le credenziali (`credentials: true`) è incompatibile con il wildcard `*`.

## Richieste preflight

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

## Equivoco comune

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

## Perché è importante

CORS è uno dei più comuni ostacoli nello sviluppo web — praticamente ogni configurazione front-end-to-API lo affronta (specialmente nello sviluppo locale con porte diverse).

Capire *perché* esiste (sicurezza same-origin del browser), come il server si iscrive tramite header, come configurarlo in modo sicuro (whitelist di origin, gestione attenta delle credenziali), e il fatto cruciale che è un meccanismo *browser* (non autorizzazione API) è essenziale per collegare correttamente e in modo sicuro i front-end alle API Node senza essere bloccati o esporre eccessivamente il server.