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 temido error de CORS (Cross-Origin Resource Sharing). Este problema ocurre cuando un navegador bloquea una solicitud HTTP realizada desde un dominio (origen) diferente al del servidor que aloja los recursos, como medida de seguridad estándar.

Principales Causas del Error CORS

El navegador activa esta política de seguridad por defecto para evitar ataques de falsificación de peticiones en sitios cruzados (CSRF). Las causas más frecuentes incluyen:

• Intentar consumir una API desde http://localhost:3000 hacia un servidor en http://localhost:5000.
• Falta de cabeceras HTTP de control de acceso en el servidor backend.
• Envío de credenciales (como cookies o tokens de autorización) sin la configuración adecuada en el cliente y el servidor.

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

La forma más rápida y recomendada de habilitar CORS en un servidor Express de Node.js es utilizando el paquete oficial cors. Sigue estos pasos:

1. Abre tu terminal en la carpeta del proyecto backend.
2. Instala el paquete ejecutando el comando: npm install cors
3. Importa y utiliza el middleware en tu archivo principal (ej. server.js o app.js):

const express = require('express');
const cors = require('cors');
const app = express();
app.use(cors());
// Tus rutas aquí
app.listen(5000, () => console.log('Servidor corriendo'));

Método 2: Configurar CORS personalizado para entornos de producción

Si necesitas limitar qué dominios pueden acceder a tu API por razones de seguridad, debes configurar opciones específicas en lugar de usar cors() de manera global.

1. Modifica la implementación del middleware especificando los orígenes permitidos:

const whitelist = ['https://tudominio.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 política CORS'));
}
}
};
app.use(cors(corsOptions));

Método 3: Configurar cabeceras manuales en JavaScript Vanilla

Si no puedes usar librerías de terceros en tu servidor backend, puedes configurar manualmente las cabeceras HTTP necesarias en cada respuesta que envíes al cliente:

1. Ubica la función que maneja la respuesta HTTP en tu servidor.
2. Agrega las siguientes cabeceras antes de enviar los datos:

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');