Cómo Solucionar el Error CORS (Cross-Origin Resource Sharing) en JavaScript y Node.js

Introducción al Error CORS en el Desarrollo Web

Cuando desarrollamos aplicaciones web modernas, es muy común separar el frontend (por ejemplo, React, Vue o JavaScript plano) del backend (como una API en Node.js con Express). Al intentar conectar ambos entornos alojados en diferentes puertos o dominios, suele aparecer el temido error de CORS en la consola del navegador: Access to fetch at 'http://localhost:3000/api' from origin 'http://localhost:5173' has been blocked by CORS policy. Este mecanismo de seguridad de los navegadores bloquea las solicitudes de recursos cruzados por defecto.

Causas Principales del Bloqueo CORS

El error CORS no es un fallo de programación en sí, sino una medida de seguridad implementada por los navegadores web modernos conocida como la política del mismo origen (Same-Origin Policy). Las causas más frecuentes incluyen:

• El servidor backend no incluye las cabeceras HTTP necesarias para permitir solicitudes desde el origen (dominio/puerto) del frontend.
• Se están realizando peticiones con credenciales (como cookies o tokens de autorización) sin la configuración adecuada en el cliente y el servidor.
• Las solicitudes de tipo preflight (método OPTIONS) no están siendo manejadas correctamente por la API.

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

La forma más rápida y recomendada de solucionar este problema en un servidor backend con Node.js y Express es utilizando el middleware oficial cors.

1. Abre tu terminal en la carpeta del proyecto backend.
2. Instala el paquete ejecutando el siguiente comando en tu consola: npm install cors
3. Abre tu archivo principal de servidor (por ejemplo, index.js o app.js).
4. Importa y configura el middleware antes de definir tus rutas: const cors = require('cors'); const express = require('express'); const app = express(); app.use(cors());
5. Reinicia tu servidor backend y vuelve a probar la solicitud desde tu frontend.

Método 2: Configurar Políticas CORS Personalizadas en Producción

Para entornos de producción, dejar el acceso abierto a cualquier dominio (app.use(cors())) puede representar un riesgo de seguridad. Es recomendable restringir el acceso únicamente a tu dominio autorizado.

1. Modifica la configuración del middleware cors en tu archivo de Node.js especificando un objeto de opciones.
2. Define la propiedad origin apuntando exclusivamente a la URL de tu frontend: const corsOptions = { origin: 'https://tu-sitio-web-frontend.com', optionsSuccessStatus: 200 };
3. Aplica las opciones al middleware: app.use(cors(corsOptions));
4. Guarda los cambios, despliega tu backend y verifica que solo el dominio autorizado pueda consumir tu API sin restricciones de CORS.