🌍 Configuración CORS en Laravel

🌍 Configuración CORS en Laravel

Cuando construyes una API en Laravel que será consumida desde un frontend (por ejemplo, Vue, React o Angular), es común enfrentarse a problemas de CORS (Cross-Origin Resource Sharing). Esto ocurre cuando el navegador bloquea las solicitudes que provienen de un dominio diferente al del servidor de la API.

💡 ¿Qué es CORS?

CORS es un mecanismo de seguridad del navegador que restringe las solicitudes HTTP entre diferentes orígenes. Por ejemplo, si tu API está en api.tusitio.com y tu frontend en app.tusitio.com, necesitarás configurar CORS correctamente para permitir la comunicación.

⚙️ Instalación y configuración

Laravel incluye el paquete Fruitcake/laravel-cors por defecto desde la versión 7.x, así que no necesitas instalar nada adicional.

El archivo de configuración se encuentra en:

config/cors.php

🧩 Ejemplo de configuración básica

Abre el archivo config/cors.php y verifica que tenga una configuración similar a esta:

return [

    'paths' => ['api/*', 'sanctum/csrf-cookie'],

    'allowed_methods' => ['*'],

    'allowed_origins' => ['*'],

    'allowed_origins_patterns' => [],

    'allowed_headers' => ['*'],

    'exposed_headers' => [],

    'max_age' => 0,

    'supports_credentials' => false,

];

🔒 Configuración más segura

En lugar de permitir todos los orígenes (*), puedes especificar dominios de confianza:

'allowed_origins' => ['https://mi-frontend.com', 'https://admin.miapp.com'],
  

Esto es recomendable en entornos de producción.

🧰 Middleware CORS

El middleware encargado de aplicar las políticas CORS está registrado automáticamente en:

// app/Http/Kernel.php

'api' => [
    \Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class,
    'throttle:api',
    \Illuminate\Routing\Middleware\SubstituteBindings::class,
],

Si por alguna razón quieres aplicarlo de forma manual:

Route::middleware(['cors'])->group(function () {
    Route::get('/users', [UserController::class, 'index']);
});

🧠 Verificando CORS en el navegador

- Abre la consola del navegador (F12 → pestaña “Network”). - Realiza una petición desde tu frontend al backend. - Si aparece el error: Access to fetch at '...' from origin '...' has been blocked by CORS policy, revisa tu configuración en config/cors.php.

📘 Ejemplo visual

🖥️ Petición desde el Frontend (fetch JS)

fetch('https://api.miapp.com/api/users')
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => console.error('Error CORS:', err));
  

💾 Respuesta esperada del backend

{
  "data": [
    { "id": 1, "name": "Jorge", "email": "jorge@example.com" },
    { "id": 2, "name": "Ana", "email": "ana@example.com" }
  ]
}
  

✅ Consejos finales

• En desarrollo puedes dejar '*' como origen permitido.
• En producción, limita a los dominios específicos de tus aplicaciones.
• Verifica que el middleware CORS esté registrado correctamente.
• Reinicia el servidor si modificas el archivo cors.php.

🏠 Volver al Índice ➡️ Siguiente tema: ⚙️ Archivo de entorno .env y configuración