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

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

El intercambio de recursos de origen cruzado (CORS, por sus siglas en inglés) es un mecanismo de seguridad implementado por los navegadores web. Este sistema restringe las solicitudes HTTP realizadas desde scripts hacia un dominio diferente al que sirvió la página original. Cuando intentas conectar una aplicación de frontend (por ejemplo, en http://localhost:3000) con una API backend (en http://localhost:5000), el navegador bloquea la respuesta si el servidor no incluye las cabeceras HTTP adecuadas.

Causas principales del bloqueo CORS

• Ausencia de las cabeceras HTTP Access-Control-Allow-Origin en las respuestas del servidor.
• Intento de enviar credenciales (como cookies o tokens de autorización) sin la configuración explícita en el cliente y el servidor.
• Métodos HTTP no permitidos (como PUT, DELETE o solicitudes con cabeceras personalizadas) que disparan una solicitud de verificación previa o preflight request (OPTIONS).

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

La forma más rápida y recomendada de habilitar CORS en una aplicación de Node.js con Express es utilizando el middleware oficial cors.

1. Instala el paquete en tu proyecto ejecutando el siguiente comando en tu terminal:
   npm install cors
2. Importa y utiliza el middleware en tu archivo principal de servidor (por ejemplo, app.js o server.js):
   const express = require('express');
const cors = require('cors');
const app = express();
app.use(cors());
3. Si necesitas restringir el acceso únicamente a un dominio específico en producción, configura el origen de esta manera:
   app.use(cors({ origin: 'https://tu-dominio-frontend.com' }));

Método 2: Configurar cabeceras HTTP manualmente sin librerías externas

Si no estás utilizando un framework como Express y prefieres configurar las cabeceras de forma nativa en Node.js mediante http.createServer, debes interceptar las solicitudes y añadir los headers correspondientes.

1. Abre el archivo donde configuras tu servidor HTTP.
2. Añade las siguientes líneas dentro de la función que maneja las peticiones entrantes:
   res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');
res.setHeader('Access-Control-Allow-Credentials', true);
3. Asegúrate de responder correctamente a las peticiones de tipo OPTIONS que envía el navegador antes de la petición real:
   if (req.method === 'OPTIONS') { res.writeHead(204); res.end(); return; }