Cómo Solucionar el Error CORS (Cross-Origin Resource Sharing) en Aplicaciones Web Paso a Paso

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

El error CORS (Cross-Origin Resource Sharing o Intercambio de Recursos de Origen Cruzado) es un mecanismo de seguridad implementado por los navegadores web. Su objetivo es evitar que un sitio web malicioso lea datos sensibles de otro sitio web sin autorización. Ocurre típicamente cuando tu aplicación frontend (por ejemplo, en http://localhost:3000) intenta realizar peticiones HTTP a una API backend ubicada en un dominio, puerto o protocolo distinto (por ejemplo, http://localhost:5000).

Causas principales del bloqueo CORS

• Falta de encabezados HTTP adecuados en el servidor backend que indiquen qué orígenes tienen permiso.
• Peticiones con credenciales (como cookies o tokens de autorización) enviadas desde un origen no autorizado explícitamente.
• Uso incorrecto de métodos HTTP complejos (como PUT o DELETE) sin la debida respuesta a las peticiones de sondeo previo (Preflight OPTIONS).

Método 1: Habilitar CORS en un servidor Node.js con Express

La forma más rápida y recomendada de solucionar este problema en el backend si utilizas Node.js con Express es instalando el paquete oficial cors.

1. Abre tu terminal en la carpeta del proyecto backend e instala el paquete ejecutando: npm install cors
2. Abre tu archivo principal de configuración (usualmente server.js o app.js).
3. Importa el paquete y configúralo como middleware global antes de declarar tus rutas:

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 configurar opciones específicas:

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

Método 2: Configurar Cabeceras HTTP Manualmente en el Servidor

Si no puedes utilizar librerías de terceros, puedes agregar manualmente los encabezados necesarios directamente en la respuesta HTTP de tu servidor backend para permitir el acceso controlado.

1. Identifica el archivo donde manejas las respuestas de la API en tu servidor.
2. Agrega los siguientes encabezados en el middleware o cabeceras globales 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');

Nota: Reemplaza el asterisco * por tu dominio específico en entornos de producción para mantener la seguridad de tu aplicación.