Cómo Solucionar el Error CORS en JavaScript y Node.js Paso a Paso

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

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. Este mecanismo restringe las solicitudes HTTP realizadas desde scripts hacia un dominio diferente al que sirvió la página original, siguiendo la política de mismo origen (Same-Origin Policy).

Cuando intentas conectar un frontend (por ejemplo, en http://localhost:3000) con un backend independiente (en http://localhost:5000) sin la configuración adecuada, el navegador bloquea la respuesta y muestra un error en la consola de desarrollo.

Causas principales del bloqueo por CORS

• Falta de los encabezados HTTP adecuados en las respuestas del servidor backend.
• Intento de enviar credenciales (como cookies o tokens de autorización) sin habilitar la configuración respectiva.
• Bloqueo de solicitudes de tipo preflight (peticiones OPTIONS) enviadas automáticamente por el navegador antes de métodos POST o PUT complejos.

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

La forma más sencilla y recomendada en el ecosistema de Node.js con Express es utilizar el middleware oficial cors.

1. Abre tu terminal en la carpeta del proyecto backend e instala el paquete ejecutando: npm install cors
2. Abre el archivo principal de tu servidor (por ejemplo, app.js o server.js).
3. Importa el paquete y configúralo 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 tu dominio de frontend en producción, puedes configurar las opciones de la siguiente manera:

const corsOptions = { origin: 'https://tu-dominio-frontend.com' };
app.use(cors(corsOptions));

Método 2: Configurar encabezados HTTP manuales en servidores Node.js nativos

Si no estás utilizando Express y manejas un servidor HTTP nativo en Node.js, debes agregar los encabezados de respuesta manualmente para permitir los orígenes cruzados.

1. Localiza la función que maneja las solicitudes HTTP en tu servidor.
2. Agrega los siguientes encabezados (headers) al objeto de respuesta antes de enviar los datos:

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

Asegúrate de manejar también las peticiones preliminares tipo OPTIONS respondiendo con un código de estado 204 o 200 para evitar que el navegador rechace la solicitud principal.