¿Qué es CORS y cómo se maneja en Node?

Question

Accepted Answer

**CORS** (Cross-Origin Resource Sharing, intercambio de recursos de origen cruzado) es un mecanismo de seguridad del navegador que controla si una página web de un **origen** puede hacer solicitudes a un servidor en un **origen diferente**. Por defecto, los navegadores bloquean las solicitudes de origen cruzado; el servidor debe permitirlas explícitamente mediante encabezados de respuesta.

## La política del mismo origen y el problema

```text
Origen = esquema + host + puerto. Estos son orígenes DIFERENTES:
  https://app.example.com   →  https://api.example.com   (host diferente)
  http://localhost:3000     →  http://localhost:4000      (puerto diferente)

El navegador bloquea la solicitud de origen cruzado A MENOS que el servidor envíe encabezados CORS que la permitan.
```

Así que una app de React en `localhost:3000` que llama a una API en `localhost:4000` es de origen cruzado — el navegador la bloquea a menos que la API lo permita.

## Los encabezados de respuesta clave

```text
Access-Control-Allow-Origin: https://app.example.com   ← quién está permitido
Access-Control-Allow-Methods: GET, POST, PUT, DELETE   ← métodos permitidos
Access-Control-Allow-Headers: Content-Type, Authorization
Access-Control-Allow-Credentials: true                 ← permitir cookies/autenticación
```

El servidor controla el acceso enviando estos encabezados. El navegador los lee y decide si permite que la página vea la respuesta.

## Manejar CORS en Express

```js
import cors from "cors";

// ❌ permitir todo — conveniente pero inseguro para APIs con credenciales/privadas
app.use(cors());

// ✅ restringir a orígenes confiables específicos
app.use(cors({
  origin: ["https://app.example.com", "http://localhost:3000"], // lista de permitidos
  methods: ["GET", "POST", "PUT", "DELETE"],
  credentials: true, // permite cookies — REQUIERE un origen específico (no "*")
}));
```

El middleware `cors` establece los encabezados por ti. Para producción, **restringe `origin` a una lista de permitidos** en lugar de `*` — y ten en cuenta que permitir credenciales (`credentials: true`) es incompatible con el comodín `*`.

## Solicitudes preflight

```text
Para solicitudes "no simples" (PUT/DELETE, encabezados personalizados, JSON), el navegador primero
envía una solicitud OPTIONS "preflight" para verificar los permisos. El middleware cors
se encarga de responderla automáticamente.
```

## Concepción errónea común

```text
CORS lo aplica el NAVEGADOR, no el servidor. NO protege tu API
de clientes que no son navegadores (curl, Postman, otros servidores) — esos ignoran CORS.
Solo rige lo que el JavaScript del navegador en otros orígenes puede hacer.
```

## Por qué es importante

CORS es uno de los obstáculos más comunes en el desarrollo web — casi toda configuración de front-end a API se topa con él (especialmente en desarrollo local con puertos diferentes).

Entender *por qué* existe (la seguridad del mismo origen del navegador), cómo el servidor lo habilita mediante encabezados, cómo configurarlo de forma segura (lista de orígenes permitidos, manejo cuidadoso de credenciales) y el hecho crucial de que es un mecanismo del *navegador* (no de autorización de la API) es esencial para conectar front-ends a APIs de Node de forma correcta y segura, sin que se bloqueen ni se sobreexponga el servidor.