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

Introducción al Error CORS en el Desarrollo Web

Uno de los dolores de cabeza más comunes para los desarrolladores frontend y backend es encontrarse con el temido error de CORS (Cross-Origin Resource Sharing) en la consola del navegador. Esto ocurre cuando una aplicación web ejecutada en un origen (dominio, protocolo o puerto) intenta realizar una petición a un recurso ubicado en un origen diferente, y el servidor de destino no incluye los encabezados HTTP adecuados para permitir dicha compartición de recursos.

Causas Principales del Bloqueo CORS

• El navegador aplica por seguridad la política de mismo origen (Same-Origin Policy).
• El servidor backend no responde con los encabezados HTTP Access-Control-Allow-Origin.
• Las peticiones con credenciales (cookies, headers de autorización) no están explícitamente permitidas por el servidor.
• Las solicitudes preflight (método OPTIONS) fallan porque el servidor no las gestiona correctamente.

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

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

1. Abre tu terminal en la raíz del proyecto backend e instala el paquete ejecutando el comando: npm install cors
2. Abre el archivo principal de tu servidor (por ejemplo, server.js o app.js).
3. Importa el paquete e instálalo como middleware antes de definir tus rutas:

const express = require('express');
const cors = require('cors');
const app = express();
app.use(cors()); // Permite peticiones de cualquier origen

Método 2: Configurar CORS de forma personalizada y segura

En entornos de producción, permitir peticiones desde cualquier origen (*) puede representar un riesgo de seguridad. Es recomendable limitar el acceso únicamente a tu dominio frontend.

1. Define un objeto de configuración con los orígenes permitidos en tu archivo de Node.js:

const corsOptions = {
origin: 'https://tu-frontend-dominio.com',
optionsSuccessStatus: 200
};

2. Aplica la configuración en tu middleware de Express de la siguiente manera:

app.use(cors(corsOptions));

Método 3: Configurar Encabezados CORS Manualmente sin librerías

Si no estás utilizando Express o prefieres configurar los encabezados HTTP manualmente en Node.js nativo o en otro lenguaje, debes interceptar la respuesta y añadir los headers necesarios.

1. Ubica la función que maneja las peticiones HTTP en tu servidor.
2. Añade los siguientes encabezados a la respuesta antes de enviarla al cliente:

res.setHeader('Access-Control-Allow-Origin', 'https://tu-frontend-dominio.com');
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');