CORS (lo que te afecta ahora)

 

 CORS (lo que te afecta ahora)

CORS = Cross-Origin Resource Sharing (intercambio de recursos de origen cruzado).

Es un mecanismo del navegador, no del servidor. Bloquea que JavaScript de una página en http://localhost:5173 haga peticiones a http://localhost:8000 si el segundo no lo autoriza explícitamente.

¿Por qué existe? Por seguridad: sin CORS, una web maliciosa podría hacer peticiones silenciosas a tu banco, tu correo, etc. usando las cookies del usuario.

¿Cómo funciona?

  1. El navegador detecta que el origen (localhost:5173) es distinto al destino (localhost:8000).

  2. Envía la petición real, pero primero puede mandar una preflight request con método OPTIONS preguntando: "¿el servidor 8000 permite que 5173 me llame?"

  3. El servidor responde con cabeceras como Access-Control-Allow-Origin.

  4. Si el servidor no las envía → el navegador bloquea la respuesta y ves un error tipo:

    text
    Access to fetch at 'http://localhost:8000/api/hello' from origin 'http://localhost:5173'
has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present...

3. ¿Cuál aplica a tu tutorial?

Tu caso:

  • React corre en http://localhost:5173.

  • Laravel API corre en http://localhost:8000.

  • Ambos son orígenes distintos (distinto puerto → distinto origen, aunque sean el mismo host).

  • Tu API no tiene autenticación todavía (más adelante añadirás JWT).

Conclusión:

Mecanismo¿Aplica a tu tutorial?¿Por qué?
CSRF❌ No (todavía)No usas sesiones ni cookies para autenticar. Cuando añadas JWT, seguirás sin necesitarlo si el token va en el header Authorization.
CORS✅ Sí, es obligatorioEl navegador bloquea la petición de React a Laravel por ser orígenes distintos, aunque no haya autenticación.

Es decir: CORS no tiene nada que ver con autenticación. Es puramente una política del navegador sobre a qué orígenes se les permite leer la respuesta. Aunque tu API sea totalmente pública, el navegador seguirá bloqueando la respuesta si el servidor no manda las cabeceras CORS adecuadas.

4. ¿Es necesario configurarlo en este tutorial?

Sí, para que funcione desde el navegador. Sin CORS, tu fetch() desde React fallará y verás el error en la consola del navegador aunque el endpoint de Laravel funcione perfectamente al abrirlo en el navegador o con curl.

La buena noticia: Laravel 11 ya trae CORS configurado con allowed_origins: ['*'] para rutas api/*. Eso significa que no tienes que tocar nada para este tutorial. Simplemente funciona.

Si usas Laravel 10, ya trae config/cors.php con 'allowed_origins' => ['*'] por defecto. También funciona sin tocar nada.

5. ¿Cuándo sí deberías preocuparte por CORS?

Más adelante, cuando:

  • Quieras restringir qué dominios pueden llamar a tu API (en lugar de *).

  • Añadas JWT y necesites permitir la cabecera Authorization explícitamente (aunque en Laravel 11 ya viene permitido por defecto).

  • Pases a producción y quieras que solo https://midominio.com pueda consumir tu API.

En ese momento, en Laravel 11 modificarías config/cors.php (si no existe, lo publicas con php artisan config:publish cors) y ajustarías:

php
'allowed_origins' => ['https://midominio.com'],
'allowed_methods' => ['*'],
'allowed_headers' => ['*'],

6. Resumen para tu tutorial

  • Puedes dejar CORS como está (funciona out-of-the-box en Laravel 10 y 11).

  • No necesitas configurar nada extra para una API sin autenticación.

  • No confundas CORS con CSRF: CSRF es para formularios con sesión; CORS es una política del navegador sobre orígenes.

  • Cuando implementes JWT, seguirás sin necesitar CSRF (porque no usarás cookies de sesión), pero sí revisarás CORS si quieres restringir orígenes en producción.

Consejo práctico: en tu tutorial, deja una nota corta como esta:

Nota sobre CORS: Laravel incluye CORS habilitado por defecto (allowed_origins: ['*']) para rutas api/*. Esto es suficiente para desarrollo. No confundir con CSRF, que aplica a formularios web con sesión, no a APIs stateless. Cuando pases a producción, restringe allowed_origins a tu dominio real en config/cors.php.

Comentarios

Publicar un comentario

Entradas más populares de este blog

Tutorial CRUD con Laravel 12-Pastel::factory(50)->create();

    <a href = "{{ route('pasteles.create') }}" class = "btn btn-primary" >         <i class = "fas fa-plus" ></i> Nuevo Pastel     </a>   Introducción Este tutorial está diseñado para enseñarte a crear un sistema CRUD (Create, Read, Update, Delete) completo en Laravel 12, utilizando las últimas características y mejores prácticas del framework. A diferencia del tutorial original (diseñado para Laravel 5), esta versión incorpora las novedades de Laravel 12 y un enfoque más moderno. Índice Propósito Comando 1-Configuración inicial composer create-project laravel/laravel nombre-proyecto 2-Creación de la migración php artisan make:migration create_pasteles_table 3-Creación del seeder php artisan make:seeder PastelSeeder 4-Creación del modelo php artisan make:model Pastel 5-Creación del controlador php artisan make:controller PastelController 6-Definición de rutas php artisan route:list 7-Creación de vistas (Crear manua...
Leer más

CRUD Completo con Laravel 12 - Guía Práctica Paso a Paso-productos

  Introducción En este tutorial, construiremos una aplicación CRUD (Create, Read, Update, Delete) completa desde cero utilizando Laravel 12. Desarrollaremos un sistema de gestión de productos que te permitirá realizar todas las operaciones básicas de base de datos. Este tutorial es ideal para consolidar todos los conocimientos adquiridos en los temas anteriores. Índice Configuración del Proyecto Creación de la Migración Creación del Seeder Creación del Modelo Configuración del Enrutador Creación del Controlador Creación de las Vistas Ejecución y Pruebas Mejoras y Optimizaciones Ejercicio de Consolidación 1. Configuración del Proyecto Crear nuevo proyecto Laravel bash # Crear el proyecto composer create-project laravel/laravel crud-productos # Navegar al directorio cd crud-productos # Configurar archivo .env # Editar el archivo .env con tus credenciales de base de datos Configuración de la base de datos env DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=crud_p...
Leer más

CRUD en Laravel 12 con Git - Guía para Principiantes

CRUD en Laravel 12 con Git - Guía para Principiantes Este tutorial está diseñado especialmente para principiantes que quieren aprender a crear un sistema CRUD completo en Laravel 12 mientras aprenden a usar Git correctamente. Cada paso incluye instrucciones claras de Git para que nunca te pierdas. 📋 Tabla de Contenidos Instalación y Git - Paso a Paso Crear la Migración - Primer Commit Crear Factory y Seeder Crear el Modelo Crear el Controlador y Form Requests Definir las Rutas Crear las Vistas Flujo de Trabajo Git para Principiantes 🚀 1. Instalación y Git - Paso a Paso Requisitos Previos bash # 1. VERIFICAR INSTALACIONES # Abre tu terminal y escribe: # Verificar PHP (debe ser 8.2 o superior) php -v # Verificar Composer composer -V # Verificar Git (si no está instalado, descárgalo de https://git-scm.com) git --version Crear el Proyecto Laravel bash # 2. CREAR EL PROYECTO # Esto crea una carpeta llamada "pasteles-app" con Laravel 12 composer create-project la...
Leer más