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

¿Qué es el Error CORS y por qué ocurre en Desarrollo?

El error de Cors (Cross-Origin Resource Sharing o Intercambio de Recursos de Origen Cruzado) es un mecanismo de seguridad implementado por los navegadores web modernos. Su objetivo es restringir las solicitudes HTTP realizadas desde scripts hacia un dominio diferente al que sirvió la página original. Cuando intentas conectar tu aplicación frontend (por ejemplo, en React o Vue ejecutándose en localhost:3000) con una API backend (en localhost:5000), el navegador bloquea la respuesta si no detecta las cabeceras de autorización adecuadas.

Causas Principales del Bloqueo por CORS

• Ausencia de las cabeceras HTTP necesarias (Access-Control-Allow-Origin) en las respuestas del servidor.
• Peticiones con credenciales (cookies o tokens de autenticación) mal configuradas entre dominios distintos.
• Uso de métodos HTTP no permitidos por la política de seguridad del servidor (como PUT, DELETE o cabeceras personalizadas).

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

La forma más rápida y recomendada si estás utilizando Node.js con Express es instalar y configurar el middleware oficial para gestionar CORS de manera automática.

1. Abre tu terminal en la carpeta del proyecto backend e instala el paquete ejecutando el siguiente comando:
   npm install cors
2. Importa y configura el middleware en tu archivo principal (por ejemplo, app.js o server.js):
   const express = require('express');
const cors = require('cors');
const app = express();
3. Habilita CORS para todas las rutas añadiendo la siguiente línea antes de tus rutas:
   app.use(cors());
4. Si deseas restringir el acceso únicamente a tu dominio de producción, configura las opciones de la siguiente manera:
   const corsOptions = { origin: 'https://tu-dominio-frontend.com' };
app.use(cors(corsOptions));

Método 2: Configurar Cabeceras HTTP Manualmente sin Librerías

Si no estás utilizando un framework como Express y necesitas configurar las cabeceras HTTP de forma nativa en Node.js o en otro lenguaje backend, debes interceptar la petición y añadir los permisos manualmente en la respuesta.

1. Localiza el archivo o controlador que gestiona las respuestas de tu servidor HTTP.
2. Añade las siguientes cabeceras en cada respuesta saliente 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');
3. Asegúrate de manejar correctamente las peticiones de tipo OPTIONS (preflight requests), respondiendo con un código de estado HTTP 204 para evitar que el navegador rechace la solicitud principal.