Cómo Solucionar el Error 'CORS Policy' en JavaScript y Node.js Paso a Paso

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

El error de CORS (Cross-Origin Resource Sharing) es un mecanismo de seguridad implementado por los navegadores web que restringe las solicitudes HTTP realizadas desde un dominio (origen) hacia un servidor ubicado en un dominio diferente. Cuando intentas consumir una API desde tu aplicación frontend en http://localhost:3000 hacia un backend en http://localhost:5000, el navegador bloquea la respuesta si el servidor no incluye los encabezados HTTP adecuados.

Las causas principales de este error incluyen la ausencia de los encabezados Access-Control-Allow-Origin en las respuestas del servidor, el intento de enviar credenciales (cookies o tokens de autorización) sin la configuración correcta, o solicitudes preflight (método OPTIONS) fallidas.

Método 1: Configurar CORS en un Servidor Node.js con Express

La forma más rápida y recomendada de solucionar este problema si controlas el backend en Node.js es utilizando el paquete oficial cors. Sigue estos pasos:

1. Instala el paquete en la raíz de tu proyecto backend ejecutando el siguiente comando en tu terminal:
   npm install cors
2. Importa y configura el middleware en tu archivo principal (ej. app.js o server.js):

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

Si deseas restringir el acceso únicamente a tu dominio de producción, puedes personalizar la configuración de la siguiente manera:

const corsOptions = {
origin: 'https://tuwebdetrabajo.com',
optionsSuccessStatus: 200
};
app.use(cors(corsOptions));

Método 2: Configurar los Encabezados HTTP Manualmente (Sin librerías)

Si estás construyendo un servidor web nativo o no deseas instalar dependencias adicionales, puedes añadir los encabezados HTTP manualmente en cada respuesta del servidor backend antes de enviar los datos al cliente.

Implementa el siguiente bloque de código en tu lógica de respuesta:

res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');

Asegúrate de manejar adecuadamente las solicitudes de tipo OPTIONS que el navegador envía automáticamente antes de la petición real para verificar los permisos.

Método 3: Uso de un Proxy Inverso durante el Desarrollo (Frontend)

Si no tienes acceso para modificar el código del servidor backend al que estás intentando conectarte, la solución ideal para el entorno de desarrollo local es configurar un proxy inverso en tu herramienta de empaquetado frontend.

Si utilizas Vite, puedes modificar tu archivo vite.config.js añadiendo la siguiente configuración:

export default defineConfig({
server: {
proxy: {
'/api': {
target: 'https://api.servidor-externo.com',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
}
}
}
});

De esta manera, tus peticiones apuntarán a /api en tu propio dominio local y el entorno de desarrollo redirigirá la solicitud de forma transparente, evitando por completo las restricciones del navegador.