Cómo Solucionar el Error CORS (Cross-Origin Resource Sharing) en Aplicaciones Web

¿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 mecanismo restringe las solicitudes HTTP que se realizan desde un script en ejecución en un origen hacia un dominio, protocolo o puerto diferente.

Cuando intentas conectar una aplicación frontend (por ejemplo, desarrollada en React en http://localhost:3000) con un backend (como una API en Node.js en http://localhost:5000), el navegador bloquea la respuesta si el servidor no incluye los encabezados HTTP adecuados que autoricen dicho origen.

Causas Principales del Error CORS

• Ausencia de los encabezados HTTP Access-Control-Allow-Origin en las respuestas del servidor.
• Peticiones con credenciales (cookies o cabeceras de autorización) sin la configuración adecuada en el cliente y servidor.
• Bloqueo de solicitudes pre-vuelo (preflight requests con método OPTIONS) por parte del backend.

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

La forma más rápida y recomendada de solucionar este problema si utilizas Express.js es instalando y configurando el paquete cors.

1. Instala el paquete 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 y habilita el middleware antes de definir tus rutas:

const cors = require('cors');

const express = require('express');

const app = express();

app.use(cors());

Si deseas restringir el acceso únicamente a un dominio específico en producción, configura el middleware de la siguiente manera:

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

Método 2: Configurar Cabeceras HTTP Manualmente

Si no puedes utilizar librerías de terceros, puedes configurar las cabeceras HTTP de forma manual en el servidor para permitir el acceso cruzado.

1. Accede al controlador o middleware global de tu servidor backend.
2. Agrega los siguientes encabezados en cada respuesta HTTP 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');

Asegúrate de manejar correctamente las solicitudes de tipo OPTIONS respondiendo con un código de estado 200 o 204 antes de ejecutar la lógica de negocio principal.