Cómo Solucionar el Error CORS (Cross-Origin Resource Sharing) en JavaScript y Node.js 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. Este sistema restringe las solicitudes HTTP realizadas desde scripts hacia un dominio diferente al que sirvió la página original, previniendo así ataques maliciosos como el robo de datos.

Causas Principales del Error CORS

Las razones más habituales por las que aparece este fallo en la consola del navegador son:

• Intentar consumir una API desde un puerto o dominio distinto sin la debida autorización del servidor.
• Falta de cabeceras HTTP específicas (como Access-Control-Allow-Origin) en la respuesta del backend.
• Solicitudes preflight (método OPTIONS) bloqueadas debido a configuraciones incorrectas en el servidor Node.js o Express.

Método 1: Solucionar CORS en el Servidor con Node.js y Express

La forma más limpia y recomendada de resolver este problema en el desarrollo backend es utilizando el middleware oficial cors en Express.

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

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

Si deseas permitir únicamente solicitudes desde un dominio específico por motivos de seguridad, puedes configurarlo de la siguiente manera:

const corsOptions = { origin: 'https://tu-dominio-frontend.com' };
app.use(cors(corsOptions));

Método 2: Configurar Cabeceras HTTP Manualmente

Si no estás utilizando un framework como Express y manejas servidores HTTP nativos en Node.js, debes añadir manualmente las cabeceras necesarias en cada respuesta.

1. Localiza el archivo donde gestionas las rutas y las respuestas del servidor.
2. Añade las siguientes líneas antes de enviar cualquier respuesta JSON o texto:

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

Con estos sencillos métodos, tus aplicaciones de JavaScript podrán comunicarse con tus APIs backend sin sufrir bloqueos por parte del navegador.