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

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

El error CORS (Cross-Origin Resource Sharing) es un mecanismo de seguridad implementado por los navegadores web modernos que restringe las solicitudes HTTP realizadas desde un script hacia un dominio diferente al que sirvió la página original. Esta política de mismo origen (Same-Origin Policy) previene ataques maliciosos como el robo de datos, pero a menudo frustra a los desarrolladores durante el desarrollo local o al conectar un frontend con una API backend separada.

Causas principales del bloqueo CORS

• El servidor backend no incluye las cabeceras HTTP necesarias (como Access-Control-Allow-Origin).
• El navegador bloquea solicitudes con credenciales (cookies o cabeceras de autorización) si el servidor no lo permite explícitamente.
• Las peticiones de tipo preflight (métodos OPTIONS) fallan porque el servidor no las responde correctamente.

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 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 configura el middleware en tu archivo principal de servidor (ej. server.js o app.js):
   const express = require('express');
const cors = require('cors');
const app = express();
3. Habilita CORS para todas las rutas añadiendo esta línea antes de tus rutas:
   app.use(cors());

Método 2: Configuración avanzada de CORS para producción

Si tu aplicación está en producción, permitir el acceso desde cualquier origen (*) puede ser un riesgo de seguridad. Es mejor restringir los dominios permitidos.

1. Define una lista blanca de orígenes autorizados en tu código de Express:
   const whitelist = ['https://tu-dominio-frontend.com', 'http://localhost:3000'];
const corsOptions = {
origin: function (origin, callback) {
if (whitelist.indexOf(origin) !== -1 || !origin) {
callback(null, true);
} else {
callback(new Error('Bloqueado por la política CORS'));
}
}
};
2. Aplica las opciones avanzadas en tu middleware:
   app.use(cors(corsOptions));

Método 3: Configurar cabeceras CORS manualmente sin librerías

Si no estás usando Express y prefieres manejar las respuestas HTTP de forma nativa en Node.js, debes inyectar las cabeceras directamente en el objeto de respuesta.

1. Ubica el controlador o la función que responde a la petición HTTP.
2. Añade las siguientes cabeceras antes de enviar la respuesta:
   res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000');
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 solicitudes preflight respondiendo con un código de estado 204 cuando el método sea OPTIONS.