¿Qué es el error CORS y por qué aparece en tus aplicaciones web?

El error 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 realizadas desde scripts hacia un dominio diferente al que sirvió la página original, previniendo así ataques de falsificación de peticiones en sitios cruzados (CSRF).

Sin embargo, durante el desarrollo de aplicaciones web modernas, es extremadamente común separar el frontend (por ejemplo, React o Vue ejecutándose en http://localhost:3000) del backend (una API REST en Node.js en http://localhost:5000). Cuando el navegador detecta esta diferencia de puertos o dominios sin los permisos adecuados, bloquea la respuesta y muestra el temido error en la consola.

Causas principales del bloqueo por CORS

Identificar la causa raíz te ahorrará horas de frustración al depurar tu código. Las razones más habituales por las que surge este inconveniente son:

• Falta de cabeceras HTTP de control de acceso 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.
• Bloqueo de solicitudes de tipo preflight (peticiones OPTIONS) que el navegador envía antes de métodos complejos como PUT, DELETE o con cabeceras personalizadas.

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

Si tu API está construida con Node.js y Express, la forma más rápida, limpia y recomendada de solucionar este problema es utilizando el middleware oficial cors.

1. Abre tu terminal en la carpeta raíz del servidor backend e instala el paquete ejecutando: npm install cors
2. Abre tu archivo principal de configuración (generalmente app.js o server.js).
3. Importa el módulo e intégralo en tu aplicación antes de definir las rutas:

const express = require('express');

const cors = require('cors');

const app = express();

app.use(cors());

// Ejemplo de ruta

app.get('/api/data', (req, res) => { res.json({ message: '¡CORS solucionado!' }); });

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

Método 2: Configurar políticas CORS avanzadas para entornos de producción

Utilizar app.use(cors()) permite el acceso desde cualquier origen, lo cual es útil en desarrollo, pero inseguro para producción. Para restringir el acceso únicamente a tu dominio de confianza, debes pasar un objeto de configuración.

1. Define la lista blanca de orígenes permitidos en tu archivo de servidor:

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 la política CORS'));

}

}

};

app.use(cors(corsOptions));

Método 3: Configuración manual de cabeceras HTTP sin librerías externas

Si por alguna razón no puedes utilizar paquetes externos en tu entorno Node.js puro, puedes configurar manualmente las cabeceras requeridas por el navegador mediante un middleware personalizado.

1. Crea una función middleware que interceptes todas las peticiones entrantes:

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

next();

});

Siguiendo cualquiera de estos métodos, podrás eliminar definitivamente el error CORS de tu consola y garantizar una comunicación fluida y segura entre tu interfaz de usuario y tu API.