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

Introducción al Error CORS

Uno de los dolores de cabeza más comunes para los desarrolladores web full-stack es encontrarse con el bloqueo de políticas de origen cruzado, conocido popularmente como error CORS (Cross-Origin Resource Sharing). Este mecanismo de seguridad implementado por los navegadores web modernos impide que una aplicación web que corre en un dominio, puerto o protocolo realice peticiones a un servidor diferente, a menos que dicho servidor lo autorice explícitamente.

Cuando intentas consumir una API desde tu aplicación de React, Vue o JavaScript plano alojada en un puerto distinto (por ejemplo, http://localhost:3000 hacia http://localhost:5000), el navegador bloquea la respuesta y muestra un mensaje en la consola similar a: Access to fetch at 'http://localhost:5000/api' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Causas Principales del Bloqueo CORS

• Diferencia de puertos o dominios: El frontend y el backend se ejecutan en URLs completamente distintas (ej. dominio-a.com y dominio-b.com).
• Falta de cabeceras HTTP: El servidor backend no incluye las cabeceras necesarias (como Access-Control-Allow-Origin) en su respuesta.
• Peticiones preflight (OPTIONS): El navegador envía una petición previa de tipo OPTIONS para verificar permisos y el servidor la rechaza o no la maneja correctamente.

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

La forma más rápida y recomendada si utilizas Node.js con Express es instalar y configurar el middleware oficial cors.

1. Abre tu terminal en la carpeta del proyecto backend.
2. Instala el paquete ejecutando el siguiente comando:
   npm install cors
3. Abre tu archivo principal de servidor (por ejemplo, index.js o app.js).
4. Importa y habilita el middleware para todas las rutas añadiendo el siguiente código:
   const cors = require('cors');
const express = require('express');
const app = express();
app.use(cors());
5. Reinicia tu servidor backend y comprueba si el error ha desaparecído.

Método 2: Configurar CORS de forma personalizada y segura para producción

Si tu aplicación va a pasar a producción, dejar el acceso libre a cualquier origen (*) puede representar un riesgo de seguridad. Es mejor limitar los dominios permitidos.

1. Modifica la configuración de cors en tu archivo de Express pasando un objeto de opciones:
const corsOptions = {
origin: 'https://tusitioficticio.com',
optionsSuccessStatus: 200
};
app.use(cors(corsOptions));
2. Para permitir múltiples dominios, puedes usar una función de validación:
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: Configurar un Proxy en el Frontend (Desarrollo Local)

Si no tienes acceso para modificar el servidor backend, puedes simular que las peticiones se originan desde el mismo servidor usando un proxy de desarrollo.

1. Si usas React (Create React App), añade la propiedad proxy en tu archivo package.json:
   "proxy": "http://localhost:5000"
2. Si usas Vite, configura el proxy en el archivo vite.config.js:
   export default defineConfig({
server: {
proxy: {
'/api': {
target: 'http://localhost:5000',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
}
}
}
});