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

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

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 función principal es restringir las solicitudes HTTP que se realizan desde un dominio (origen) hacia un servidor ubicado en un dominio diferente, previniendo ataques de tipo CSRF y robo de datos sensibles.

Cuando desarrollas aplicaciones web separadas, como un frontend en React o Vue ejecutándose en http://localhost:3000 y un backend en Node.js/Express en http://localhost:5000, el navegador bloquea automáticamente las respuestas si el servidor de la API no autoriza expresamente dicho origen mediante las cabeceras HTTP correspondientes.

Causas principales del bloqueo por CORS

Identificar el origen del problema te ayudará a aplicar la solución correcta en tu arquitectura de desarrollo. Las causas más frecuentes son:

• Ausencia de las cabeceras HTTP de control de acceso (Access-Control-Allow-Origin) en las respuestas del servidor.
• Intento de enviar credenciales (como cookies o tokens de autorización) sin la configuración adecuada en la petición del cliente y la respuesta del servidor.
• Métodos HTTP no permitidos explícitamente (como PUT, DELETE o PATCH) en peticiones preflight (solicitudes OPTIONS).

Método 1: Solucionar CORS en el servidor con Node.js y Express

La forma más limpia, rápida y recomendada para solucionar este error en un entorno backend de Node.js con Express es utilizando el paquete 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 (por ejemplo, server.js o app.js):

const express = require('express');
const cors = require('cors');
const app = express();

// Habilitar CORS para todas las rutas y orígenes
app.use(cors());

app.get('/api/datos', (req, res) => {
res.json({ mensaje: '¡CORS configurado correctamente!' });
});

app.listen(5000, () => console.log('Servidor corriendo en puerto 5000'));

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

Si tu aplicación va a pasar a producción, dejar CORS abierto para cualquier origen (*) puede representar un riesgo de seguridad. Debes restringir el acceso únicamente a los dominios confiables.

1. Modifica la inicialización del middleware de cors utilizando un objeto de opciones:

const dominiosPermitidos = ['https://tusitio.com', 'https://admin.tusitio.com'];

const opcionesCors = {
origin: function (origin, callback) {
if (!origin || dominiosPermitidos.indexOf(origin) !== -1) {
callback(null, true);
} else {
callback(new Error('Bloqueado por la política de CORS'));
}
},
credentials: true,
optionsSuccessStatus: 200
};

app.use(cors(opcionesCors));

Método 3: Configurar cabeceras HTTP de forma manual (Sin librerías externas)

Si por alguna razón no puedes utilizar paquetes externos en tu servidor backend, puedes configurar las cabeceras de respuesta de manera manual creando un middleware personalizado en Express.

1. Añade el siguiente código antes de definir tus rutas para interceptar todas las peticiones:

app.use((req, res, next) => {
res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000');
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
res.setHeader('Access-Control-Allow-Credentials', 'true');
if (req.method === 'OPTIONS') {
return res.sendStatus(200);
}
next();
});