Cómo Solucionar el Error CORS (Cross-Origin Resource Sharing) Paso a Paso

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

El error CORS (Cross-Origin Resource Sharing o Intercambio de Recursos de Origen Cruzado) es un mecanismo de seguridad implementado por los navegadores web modernos. Su función principal es restringir las solicitudes HTTP que se realizan desde un dominio (origen) hacia un servidor ubicado en un dominio diferente, protegiendo así a los usuarios contra ataques de falsificación de peticiones en sitios cruzados (CSRF).

Este problema es extremadamente común en entornos de desarrollo modernos donde el frontend (ej. desarrollado en React, Vue o Angular ejecutándose en http://localhost:3000) intenta consumir una API RESTful alojada en un servidor backend diferente (ej. http://localhost:5000). Al diferir el puerto o el dominio, el navegador bloquea la respuesta y muestra el temido mensaje en la consola de depuración.

Causas principales del bloqueo CORS

Identificar el origen del fallo es fundamental para aplicar la corrección adecuada. Las causas más frecuentes incluyen:

• Falta de cabeceras HTTP de control de acceso en las respuestas del servidor backend.
• Intento de enviar credenciales (como cookies o tokens de autorización) sin la configuración explícita en el cliente y el servidor.
• Uso de métodos HTTP no permitidos (como PUT o DELETE) en solicitudes de origen cruzado que requieren una petición previa de tipo OPTIONS (preflight request).

Método 1: Solucionar CORS en Node.js usando el paquete Express CORS

Si tu backend está desarrollado en Node.js utilizando el framework Express, la forma más rápida y limpia de habilitar CORS es mediante el middleware oficial cors.

1. Instala el paquete en la raíz de tu proyecto ejecutando el siguiente comando en tu terminal:
   npm install cors
2. Abre el archivo principal de tu servidor (por lo general server.js o app.js).
3. Importa e inicializa el middleware antes de definir tus rutas:

const express = require('express');
const cors = require('cors');
const app = express();
app.use(cors());

Si deseas restringir el acceso únicamente a un origen específico por razones de seguridad, puedes configurar el middleware de la siguiente manera:

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

Método 2: Configurar cabeceras HTTP manuales en el Servidor

Si no estás utilizando un framework que gestione middleware o prefieres configurar las respuestas de forma nativa en tu servidor HTTP, debes añadir manualmente las cabeceras necesarias en cada respuesta saliente.

1. Localiza la función que gestiona las respuestas de tu API.
2. Añade las siguientes cabeceras HTTP antes de enviar los datos al cliente:

res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');

Nota: Cambia el asterisco * por tu dominio de producción cuando despliegues la aplicación en un servidor real para evitar vulnerabilidades de seguridad.

Método 3: Uso de un Proxy Inverso en desarrollo (Frontend)

Otra alternativa excelente para solucionar problemas de CORS durante la fase de desarrollo local sin modificar el código del backend es configurar un proxy en tu herramienta de empaquetado o framework frontend.

1. Si utilizas Vite para tu proyecto frontend, abre el archivo vite.config.js.
2. Añade la propiedad server.proxy dentro de la configuración principal:

export default defineConfig({ server: { proxy: { '/api': { target: 'http://localhost:5000', changeOrigin: true, rewrite: (path) => path.replace(/^\/api/, '') } } } });

De esta forma, las peticiones realizadas desde tu aplicación hacia /api serán redirigidas internamente por el entorno de desarrollo, evitando por completo las restricciones del navegador.