¿Cómo configuras CORS en FastAPI?

Question

Accepted Answer

**CORS** (Intercambio de Recursos de Origen Cruzado) es un mecanismo de seguridad del navegador que controla si una página web de un **origen** puede llamar a tu API en un origen diferente. FastAPI lo configura con el **`CORSMiddleware`** integrado. Encontrarás CORS cada vez que un frontend en un dominio/puerto diferente llama a tu API.

## El problema que CORS aborda

```text
A React app at http://localhost:3000 calling an API at http://localhost:8000 is
CROSS-ORIGIN (different port). The BROWSER blocks the response unless the API
sends CORS headers permitting that origin.
(origin = scheme + host + port)
```

## Configurando CORSMiddleware

```python
from fastapi.middleware.cors import CORSMiddleware

app.add_middleware(
    CORSMiddleware,
    allow_origins=["https://app.example.com", "http://localhost:3000"],  # ALLOWLIST of origins
    allow_credentials=True,         # allow cookies/auth (requires specific origins, not "*")
    allow_methods=["*"],             # or ["GET", "POST", ...]
    allow_headers=["*"],
)
```

El middleware agrega los encabezados de respuesta CORS necesarios, indicando al navegador qué orígenes, métodos y encabezados están permitidos. El navegador hace cumplir estas reglas.

## Seguridad: restringir orígenes (no uses "*")

```python
# ❌ allowing all origins — convenient but insecure for credentialed/private APIs
allow_origins=["*"]
# ✅ restrict to your known frontend origins (an allowlist)
allow_origins=["https://app.example.com"]
# NOTE: allow_credentials=True is INCOMPATIBLE with allow_origins=["*"]
```

Para producción, **restringe `allow_origins` a una lista blanca** en lugar de `*`. Además, permitir credenciales (cookies/auth) requiere orígenes específicos — el comodín no está permitido con credenciales.

## Un concepto erróneo clave

```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 entirely.
CORS only governs what browser JavaScript from other origins may do.
```

## Por qué es importante

CORS es uno de los obstáculos más comunes en el desarrollo web — casi toda configuración frontend a API la encuentra (especialmente en desarrollo local con puertos diferentes, y en producción con un dominio frontend separado), así que saber cómo configurarlo con `CORSMiddleware` de FastAPI es conocimiento práctico y frecuentemente necesario.

Entender *por qué* existe (seguridad de mismo origen del navegador), cómo el servidor se suscribe a través de encabezados de respuesta, y cómo configurarlo (orígenes permitidos, métodos, encabezados, credenciales) es necesario para conectar frontends a APIs de FastAPI sin que las solicitudes sean bloqueadas.

Igualmente importante es configurarlo **de forma segura** — restringir `allow_origins` a una lista específica en lugar del permisivo `*` (y entender que las credenciales no son compatibles con el comodín) — y comprender la idea errónea crucial de que **CORS es un mecanismo del navegador, no autorización de API** (no protege contra clientes que no son navegadores).

Saber cómo configurar CORS correcta y seguramente es conocimiento importante del día a día para cualquier API de FastAPI consumida por un frontend web.