Cómo Solucionar el Error CORS Access-Control-Allow-Origin Paso a Paso

¿Qué es el error CORS y por qué ocurre?

El error CORS (Cross-Origin Resource Sharing) es un mecanismo de seguridad implementado por los navegadores web para restringir las peticiones HTTP de origen cruzado. Esto impide que un sitio web cargue recursos de un dominio, puerto o protocolo diferente sin consentimiento explícito.

Cuando realizas una petición desde tu frontend local hacia una API en otro dominio, el navegador bloquea la respuesta si el servidor no incluye las cabeceras adecuadas. El error típico en la consola de desarrollo se muestra con el mensaje: Access to fetch at has been blocked by CORS policy.

Principales causas del bloqueo de origen cruzado

Este problema de comunicación se produce principalmente por tres razones técnicas:

• Diferencia de origen: El frontend y el backend operan en dominios distintos, o incluso en el mismo dominio pero con puertos diferentes (por ejemplo, localhost:3000 frente a localhost:5000).
• Ausencia de la cabecera Access-Control-Allow-Origin: El servidor de destino no incluye esta cabecera obligatoria en su respuesta HTTP.
• Fallo en la petición Preflight: El navegador envía una solicitud OPTIONS de verificación antes del método principal (POST, PUT, DELETE) y el backend no responde con un código de estado correcto (200 o 204).

Método 1: Configurar las cabeceras CORS en el servidor backend

La solución más robusta y definitiva consiste en configurar el servidor para que acepte peticiones desde el origen de tu frontend.

En Node.js con Express: Instala el middleware oficial con el comando npm install cors y aplícalo en tu archivo principal:

const express = require('express'); const cors = require('cors'); const app = express(); app.use(cors({ origin: 'http://localhost:3000' }));

En PHP: Añade las directivas de control de acceso al inicio de tus scripts de procesamiento:

header('Access-Control-Allow-Origin: http://localhost:3000'); header('Access-Control-Allow-Headers: Content-Type, Authorization'); header('Access-Control-Allow-Methods: GET, POST, OPTIONS');

Método 2: Implementar un Proxy en tu entorno de desarrollo frontend

Si estás consumiendo una API de terceros y no tienes acceso a su backend, puedes saltarte la restricción configurando un proxy de desarrollo local.

1. Si utilizas Vite: Abre tu archivo vite.config.js y añade la regla de redirección de la siguiente manera: server: { proxy: { '/api': 'http://localhost:5000' } }.
2. Si utilizas Create React App: Abre tu archivo package.json y añade la clave de redirección directamente: 'proxy': 'http://localhost:5000'.
3. Prueba la ruta local: Cambia la URL de tus peticiones fetch de http://localhost:5000/api/datos a /api/datos. El empaquetador redirigirá el tráfico de forma segura sin disparar el bloqueo del navegador.

Método 3: Responder correctamente a las peticiones OPTIONS (Preflight)

Cuando usas cabeceras personalizadas o métodos de modificación de recursos, el navegador inicia un pre-vuelo técnico para validar la seguridad del canal.

• Asegúrate de que tu servidor responda con un estado exitoso (HTTP 200 o 204) ante cualquier método de tipo OPTIONS.
• Verifica que las cabeceras personalizadas de tu frontend (como tokens de autenticación) estén declaradas explícitamente en la cabecera Access-Control-Allow-Headers del backend.