Capítulo 6.2: Configuración de CORS

Tiempo de estudio: 30 minutos

---

1. CORS: ¿Qué es y por qué es necesario?

Como hemos descubierto, CORS (Cross-Origin Resource Sharing) es una política de seguridad del navegador. Previene la situación en la que un sitio web malicioso evil-site.com en su nombre (usando sus cookies) realiza solicitudes a your-bank.com y roba datos.

¿Cómo funciona?

1. Frontend (navegador) desde el dominio A quiere obtener datos del dominio B.
2. El navegador envía al dominio B una solicitud "preliminar" especial (solicitud preflight) con el método OPTIONS, preguntando: "Oye, dominio B, ¿puedo, el dominio A, hacerte una solicitud GET?"
3. Backend (servidor en el dominio B) debe responder con encabezados HTTP especiales, por ejemplo: Access-Control-Allow-Origin: A.
4. Si la respuesta del servidor permite la solicitud, el navegador envía la solicitud GET principal. Si no, la bloquea y emite un error CORS.

💡 Analogía espacial:

Antes de teletransportar al capitán a una estación extranjera (enviar una solicitud POST), la nave (navegador) envía un dron (solicitud OPTIONS) con la pregunta: "Estación, ¿aceptan teletransportación desde la nave 'Enterprise'?". La estación (API) responde: "Sí, la recepción desde la 'Enterprise' está permitida" (encabezado Access-Control-Allow-Origin). Solo después de eso comienza la teletransportación.

---

2. Configuración de CORS en Laravel (Enfoque moderno para Laravel 11+)

En Laravel 11+, la configuración de CORS se ha vuelto mucho más sencilla y no requiere la publicación del archivo config/cors.php si necesita configuraciones básicas. Todo se gestiona a través de los archivos .env y bootstrap/app.php.

Paso 1: Configuración a través de variables de entorno

Abra su archivo .env. Laravel ya proporciona variables predeterminadas para gestionar CORS para las API.

# .env

# ... otras variables

# Especifique las rutas para las cuales CORS estará activo.
# 'api/*' - valor estándar para todas las rutas API.
CORS_PATHS=api/*

# Especifique los orígenes permitidos (dominios).
# Para desarrollo, especifique la dirección de su frontend.
# Se pueden enumerar separados por comas, sin espacios.
CORS_ALLOWED_ORIGINS=http://localhost:5500,http://127.0.0.1:5500

# Otras configuraciones (generalmente se pueden dejar por defecto)
CORS_ALLOWED_METHODS=*
CORS_ALLOWED_HEADERS=*
CORS_EXPOSED_HEADERS=
CORS_MAX_AGE=0
CORS_SUPPORTS_CREDENTIALS=false

Variables clave:

• CORS_ALLOWED_ORIGINS: La variable más importante. Aquí enumera los dominios desde los cuales se permiten las solicitudes. * permite a todos, pero esto es

extremadamente inseguro para producción.

• CORS_PATHS: Rutas a las que se aplican estas reglas. api/* significa todo lo que comienza con /api/.

Después de cambiar .env no es necesario reiniciar el servidor si está usando php artisan serve. Los cambios se aplicarán automáticamente.

Paso 2 (Opcional): Configuración avanzada en bootstrap/app.php

Si necesita una lógica más compleja (por ejemplo, permitir subdominios usando patrones), aún tendrá que publicar el archivo de configuración y configurar el middleware. Pero para el 95% de los casos, el archivo .env es suficiente.

El comando php artisan install:api configura automáticamente el middleware CORS básico para las rutas de la API en el archivo bootstrap/app.php. Se ve así:

// bootstrap/app.php
->withMiddleware(function (Middleware $middleware) {
    // Esta línea ya será añadida por el comando install:api
    // Es la que habilita el procesamiento de CORS para todas las rutas API
    $middleware->api(base_path('routes/api.php'));
})

Dentro de ->api(), Laravel ya usa el middleware HandleCors, que lee las configuraciones de su .env. Todo es simple y viene listo para usar.

⚠️ ¡Importante! No use CORS_ALLOWED_ORIGINS='*' en un servidor de producción si su API no es completamente pública. Esto abre una vulnerabilidad potencial. Siempre enumere los dominios específicos de su frontend.

---

3. Configuración de CORS en FastAPI

FastAPI utiliza el concepto de Middleware (software intermedio) para manejar tareas transversales como CORS.

Paso 1: Abra el archivo principal de su aplicación

Este es el archivo donde crea la instancia de FastAPI (normalmente main.py).

Paso 2: Añada CORSMiddleware

FastAPI proporciona un middleware listo para usar para la configuración de CORS.

# main.py
from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware # 1. Importamos el middleware

app = FastAPI(
    title="SpaceAPI",
    description="API para gestión de planetas en la galaxia",
    version="1.0.0"
)

# 2. Lista de orígenes permitidos (origins)
origins = [
    "http://localhost:5500",
    "http://127.0.0.1:5500",
    # En producción, aquí estará el dominio de su frontend
    # "https://my-awesome-app.com",
]

# 3. Añadimos el middleware a la aplicación
app.add_middleware(
    CORSMiddleware,
    allow_origins=origins,  # Permitimos los orígenes especificados
    allow_credentials=True, # Permitimos las cookies (será necesario para la autenticación)
    allow_methods=["*"],    # Permitimos todos los métodos (GET, POST, etc.)
    allow_headers=["*"],    # Permitimos todos los encabezados
)

# ... aquí sus routers y el resto del código

Paso 3: Reinicie el servidor Uvicorn El servidor Uvicorn normalmente se recarga automáticamente al cambiar el código. Si no, reinícielo manualmente. Ahora su servidor FastAPI responderá correctamente a las solicitudes OPTIONS desde el frontend.

---

Cuestionario de repaso

1. La solicitud que el navegador envía antes de la principal para verificar CORS se llama:

a) CHECK request b) Preflight request c) Handshake request

2. En Laravel moderno (11+), las configuraciones básicas de CORS se establecen principalmente en:

a) El archivo bootstrap/app.php b) El archivo .env c) El archivo routes/api.php

3. En FastAPI, para configurar CORS se utiliza:

a) El decorador @app.cors() b) La clase incorporada Security c) El middleware

4. ¿Qué valor de CORS_ALLOWED_ORIGINS es el más seguro para producción?

a) CORS_ALLOWED_ORIGINS='*' b) CORS_ALLOWED_ORIGINS=http://my-frontend.com,https://my-frontend.com c) No establecer esta variable

Verificar

---

🚀 Resumen del capítulo:

¡Se ha convertido en un "diplomático de comunicaciones interestelares"! Sus APIs ahora pueden interactuar de forma segura con aplicaciones externas, utilizando enfoques modernos y correctos. - ✅ Entendimos el mecanismo de funcionamiento de CORS y las solicitudes preflight. - 🔧 Configuramos CORS para Laravel 11+ a través del archivo .env. - ⚙️ Configuramos CORS para FastAPI usando CORSMiddleware. - 🛰️ Establecimos con éxito la conexión entre el frontend y el backend.

El puente de comunicación está construido y protegido. Ahora podemos pensar en cómo permitir que solo "personal autorizado" utilice este puente.

📌 Verificación:

• El criterio principal de éxito es la ausencia de errores CORS en la consola del navegador al solicitar datos desde el frontend.
• En la pestaña "Network" (Red) de las herramientas del desarrollador, puede ver dos solicitudes a su API: la primera con el método OPTIONS (estado 200/204) y la segunda con el método GET (estado 200). Esta es una demostración clara del funcionamiento de CORS.