Cómo Solucionar el Error CORS (Cross-Origin Resource Sharing) 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 de CORS (Cross-Origin Resource Sharing). Cuando intentas realizar una petición HTTP desde tu aplicación web alojada en un dominio hacia una API en un dominio, puerto o protocolo distinto, el navegador bloquea la respuesta por razones de seguridad. En la consola del navegador suele aparecer un mensaje como: Access to fetch at 'http://localhost:5000/api' from origin 'http://localhost:3000' has been blocked by CORS policy.

Causas Principales del Bloqueo CORS

El mecanismo de seguridad Same-Origin Policy implementado por los navegadores modernos es el responsable directo. Las causas más habituales de este fallo incluyen:

• Intentar conectar un frontend en desarrollo (ej. puerto 3000) con un backend en otro puerto (ej. puerto 5000).
• Falta de cabeceras HTTP específicas en las respuestas del servidor que autoricen el origen de la solicitud.
• Peticiones con métodos complejos (como PUT, DELETE o con cabeceras personalizadas) que no superan la solicitud preliminar o preflight (método OPTIONS).

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

La forma más rápida y recomendada si utilizas Express.js en tu backend es instalar y configurar el middleware oficial cors.

1. Abre tu terminal en la carpeta del proyecto backend y ejecuta el siguiente comando para instalar la dependencia:
   npm install cors
2. Abre tu archivo principal de servidor (ej. server.js o app.js) e importa el paquete:
   const cors = require('cors');
3. Habilita el middleware antes de definir tus rutas agregando la siguiente línea:
   app.use(cors());
4. Si deseas restringir el acceso únicamente a tu dominio de frontend en producción, configura los orígenes permitidos de la siguiente manera:
   app.use(cors({ origin: 'https://tu-dominio-frontend.com' }));

Método 2: Configuración Manual de Cabeceras HTTP

Si no puedes utilizar paquetes externos o estás construyendo un servidor nativo en Node.js, debes configurar manualmente las cabeceras de respuesta HTTP para permitir el acceso cruzado.

1. Localiza el archivo donde gestionas las respuestas de tu servidor HTTP.
2. Añade el siguiente middleware personalizado antes de enviar cualquier respuesta:
   app.use((req, res, next) => { 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'); next(); });
3. Reinicia tu servidor backend y vuelve a probar la petición desde tu aplicación cliente para verificar que el error ha desaparecido por completo.