Cómo Solucionar el Error CORS (Access-Control-Allow-Origin) 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 web full-stack es el temido error CORS (Cross-Origin Resource Sharing). Este problema ocurre cuando tu aplicación frontend (por ejemplo, en React o Vue ejecutándose en http://localhost:3000) intenta realizar una petición HTTP a una API backend ubicada en un dominio o puerto diferente (como http://localhost:5000). Por razones de seguridad, los navegadores bloquean estas solicitudes por defecto.

¿Cuáles son las Causas Principales del Error CORS?

El mecanismo de seguridad de política de mismo origen (Same-Origin Policy) restringe cómo un documento o script cargado desde un origen interactúa con un recurso de otro origen. Las causas más frecuentes incluyen:

• Falta de cabeceras HTTP específicas en el servidor backend que permitan solicitudes cruzadas.
• Intentar acceder a una API pública sin el permiso explícito del servidor de origen.
• Configuración incorrecta del proxy o de los encabezados de respuesta en entornos de desarrollo local.

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

La forma más sencilla y recomendada de solucionar este problema en un servidor backend de Node.js que utiliza Express es mediante el uso del middleware oficial cors.

1. Abre tu terminal en la carpeta del proyecto backend y ejecuta el siguiente comando para instalar el paquete:
   npm install cors
2. Abre tu archivo principal de servidor (por ejemplo, server.js o app.js).
3. Importa el paquete y utilízalo como middleware global antes de definir tus rutas:
   const express = require('express');
const cors = require('cors');
const app = express();
app.use(cors());
4. Guarda el archivo y reinicia tu servidor Node.js. El error debería desaparecer inmediatamente.

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

Si no estás utilizando un framework como Express o prefieres configurar las cabeceras de forma manual, puedes interceptar las peticiones HTTP y agregar los encabezados necesarios directamente en la respuesta del servidor.

1. Accede al archivo de configuración de tu servidor HTTP.
2. Agrega los siguientes encabezados en cada respuesta saliente:
   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');
3. Nota: Reemplaza el asterisco (*) por tu dominio de producción específico cuando despliegues la aplicación por motivos de seguridad.