Cómo Solucionar el Error CORS (Access-Control-Allow-Origin) en JavaScript y Node.js Paso a Paso

¿Qué es el error CORS y por qué ocurre en el desarrollo web?

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, protegiendo así a los usuarios contra ataques maliciosos como el robo de datos o sesiones.

Causas principales del bloqueo CORS

Las causas más comunes por las que aparece este error en la consola del navegador incluyen:

• Intentar consumir una API desde un puerto diferente (ej. frontend en localhost:3000 y backend en localhost:5000).
• Falta de los encabezados HTTP requeridos por el navegador en la respuesta del servidor.
• Configuración incorrecta del servidor backend al aceptar solicitudes de origen cruzado.

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

La forma más rápida y recomendada de solucionar este problema en un entorno de Node.js con Express es utilizando el middleware oficial cors.

1. Instala el paquete en tu proyecto ejecutando el siguiente comando en tu terminal:
   npm install cors
2. Abre el archivo principal de tu servidor (ej. app.js o server.js).
3. Importa el paquete e inicialízalo antes de definir tus rutas:

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

Método 2: Configurar encabezados HTTP personalizados de forma manual

Si no estás utilizando un framework como Express y prefieres configurar los encabezados de forma nativa en Node.js, debes interceptar la petición y agregar los headers correspondientes.

1. Localiza el archivo donde configuras el servidor HTTP nativo.
2. Agrega los siguientes encabezados en la respuesta de cada solicitud:

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

Nota: Cambiar * por un dominio específico en producción es altamente recomendable por motivos de seguridad.