Cómo Solucionar el Error CORS (Access-Control-Allow-Origin) en JavaScript y Node.js Paso a Paso

Introducción al Error CORS en el Desarrollo Web

Uno de los dolores de cabeza más comunes para los desarrolladores frontend y backend es el famoso error CORS (Cross-Origin Resource Sharing). Este mecanismo de seguridad implementado por los navegadores web bloquea las solicitudes HTTP realizadas desde un dominio (origen) diferente al que sirve la API, protegiendo a los usuarios de ataques maliciosos como el robo de datos.

¿Cuáles son las Causas Principales del Error CORS?

El error se manifiesta en la consola del navegador con un mensaje similar a:

Access to fetch at 'http://localhost:5000/api/data' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Las causas más frecuentes incluyen:

• Intentar consumir una API desde un puerto diferente en entorno de desarrollo local (por ejemplo, frontend en el puerto 3000 y backend en el 5000).
• Olvidar configurar los encabezados de respuesta HTTP necesarios en el servidor backend.
• Realizar peticiones con credenciales (cookies o tokens de autenticación) sin la configuración adecuada de ambos lados.

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

Si estás desarrollando una API utilizando Node.js y Express, la forma más sencilla y recomendada de solucionar este problema es instalando y configurando el middleware oficial cors.

1. Abre tu terminal en la carpeta del proyecto backend e instala el paquete ejecutando el siguiente comando:npm install cors
2. Abre tu archivo principal del servidor (por ejemplo, server.js o app.js) e importa el módulo:const cors = require('cors');
3. Habilita CORS para todas las rutas añadiendo el middleware antes de definir tus rutas:app.use(cors());
4. Si deseas restringir el acceso únicamente a tu dominio de producción, configura el origen específico de la siguiente manera:
   const corsOptions = { origin: 'https://tudominio.com', optionsSuccessStatus: 200 }; app.use(cors(corsOptions));

Método 2: Configurar Encabezados HTTP Manualmente en el Servidor

Si no estás utilizando un framework como Express y prefieres configurar los encabezados HTTP manualmente en Node.js puro, debes interceptar las respuestas y añadir los headers correspondientes.

1. Ubica la función que maneja las peticiones HTTP en tu servidor backend.
2. Añade los siguientes encabezados en la respuesta antes de enviarla al cliente:
   res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
3. Asegúrate de manejar también las peticiones preliminares de tipo OPTIONS que los navegadores envían antes de realizar peticiones complejas.