O que é CORS e como você o manipula no Node?

Question

Accepted Answer

**CORS** (Cross-Origin Resource Sharing) é um mecanismo de segurança do navegador que controla se uma página da web de uma **origem** pode fazer requisições para um servidor em uma **origem diferente**. Por padrão, os navegadores bloqueiam requisições cross-origin; o servidor deve permitir explicitamente através de headers de resposta.

## Por que isso importa

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

So a React app on `localhost:3000` calling an API on `localhost:4000` is cross-origin — the browser blocks it unless the API opts in.

## Os headers de resposta principais

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

O servidor controla o acesso enviando esses headers. O navegador os lê e decide se permite à página ver a resposta.

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

O middleware `cors` define os headers para você. Para produção, **restrinja `origin` a uma lista de permissões** em vez de `*` — e note que permitir credenciais (`credentials: true`) é incompatível com o coringa `*`.

## Requisições 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.
```

## Conceito errado comum

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

## Por que isso importa

CORS é um dos tropeços mais comuns em desenvolvimento web — praticamente toda configuração front-end-para-API a encontra (especialmente em dev local com diferentes portas).

Entender *por que* existe (segurança same-origin do navegador), como o servidor se manifesta através de headers, como configurá-lo com segurança (listas de permissões de origem, manipulação cuidadosa de credenciais) e o fato crucial de que é um mecanismo *navegador* (não autorização de API) é essencial para conectar corretamente e com segurança front-ends a APIs Node sem ser bloqueado ou sobre-expor o servidor.