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

Introducción al Error de CORS en el Desarrollo Web

Uno de los dolores de cabeza más comunes para los desarrolladores frontend y backend es el temido error de CORS (Cross-Origin Resource Sharing). Este mecanismo de seguridad de los navegadores web bloquea las solicitudes HTTP realizadas desde un dominio (origen) diferente al del servidor que aloja los recursos. Si estás intentando conectar tu aplicación de JavaScript (usando fetch o Axios) con una API alojada en otro puerto o dominio y ves el mensaje Access to fetch at '...' from origin '...' has been blocked by CORS policy, este artículo es para ti.

Causas Principales del Bloqueo por CORS

El error de CORS no es un fallo de programación propiamente dicho, sino una medida de seguridad implementada por los navegadores modernos basada en la política de el mismo origen (Same-Origin Policy). Las causas más frecuentes incluyen:

• Intentar consumir una API desde http://localhost:3000 hacia un backend en http://localhost:5000.
• Falta de cabeceras HTTP específicas en las respuestas del servidor que indiquen qué dominios tienen permiso de acceso.
• Peticiones con credenciales (como cookies o tokens de autorización) que no están correctamente configuradas en el cliente y el servidor.

Método 1: Configurar CORS en un Servidor Node.js con Express

La forma más rápida y recomendada de solucionar este problema en el backend cuando utilizas Node.js y Express es mediante el uso del paquete oficial cors.

1. Instala el paquete en tu proyecto ejecutando el siguiente comando en tu terminal:
   npm install cors
2. Importa y habilita el middleware en tu archivo principal del servidor (ej. server.js o app.js):

const express = require('express');
const cors = require('cors');
const app = express();
// Habilitar CORS para todas las rutas
app.use(cors());

Si deseas restringir el acceso únicamente a un dominio específico por razones de seguridad, puedes configurar el middleware de la siguiente manera:

const corsOptions = {
origin: 'https://tusitio.com',
optionsSuccessStatus: 200
};
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 u otro lenguaje, debes agregar manualmente las cabeceras necesarias (Headers) en cada respuesta HTTP que envíe tu servidor.

1. Ubica la función que maneja las peticiones entrantes en tu API.
2. Añade las siguientes cabeceras antes de enviar la respuesta al cliente:

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 el dominio exacto de tu frontend en entornos de producción para mantener la seguridad de tu aplicación.