Cómo Solucionar el Error CORS (Cross-Origin Resource Sharing) en Aplicaciones Web 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 mecanismo restringe las solicitudes HTTP realizadas desde scripts a un dominio diferente al que sirvió la página original. Cuando intentas consumir una API desde un origen distinto (por ejemplo, frontend en http://localhost:3000 y backend en http://localhost:5000) sin los permisos adecuados, el navegador bloquea la respuesta y muestra el temido error CORS en la consola.

Causas Principales del Bloqueo CORS

• Ausencia de cabeceras HTTP de control de acceso en el servidor (como Access-Control-Allow-Origin).
• Intento de enviar credenciales (como cookies o tokens de autorización) sin la configuración correcta en el cliente y servidor.
• Solicitudes con métodos HTTP no permitidos (como PUT o DELETE) en peticiones preflight (solicitudes OPTIONS).
• Configuración incorrecta del proxy inverso (Nginx o Apache) durante el despliegue.

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

La forma más rápida y efectiva de solucionar este problema si estás desarrollando una API con Node.js y Express es utilizando el paquete oficial cors.

1. Instala el paquete en tu proyecto ejecutando el siguiente comando en tu terminal: npm install cors
2. 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()); // Habilita CORS para todas las rutas y origenes
app.listen(5000, () => console.log('Servidor corriendo en puerto 5000'));

Si deseas restringir el acceso únicamente a tu dominio de producción, puedes configurar los orígenes permitidos de la siguiente manera:

const corsOptions = { origin: 'https tusdominio.com' };
app.use(cors(corsOptions));

Método 2: Configurar Cabeceras CORS en Nginx (Servidor de Producción)

Si tu aplicación está desplegada en un servidor web Nginx y el error ocurre al servir archivos estáticos o realizar proxy inverso, debes añadir las cabeceras manualmente en el bloque de configuración del servidor.

1. Abre tu archivo de configuración de Nginx, usualmente ubicado en /etc/nginx/sites-available/default.
2. Añade las siguientes directivas dentro del bloque location o server:

add_header 'Access-Control-Allow-Origin' '*' always;
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE' always;
add_header 'Access-Control-Allow-Headers' 'X-Requested-With, Accept, Content-Type, Origin' always;

3. Guarda el archivo y verifica la sintaxis de Nginx con el comando: sudo nginx -t
4. Reinicia el servicio para aplicar los cambios: sudo systemctl restart nginx

Método 3: Configurar el Cliente Frontend (Fetch API o Axios)

En ocasiones, el problema radica en cómo el cliente realiza la petición HTTP, especialmente cuando se manejan credenciales.

1. Si utilizas la API nativa fetch, asegúrate de incluir la propiedad credentials si envías cookies:

fetch('https://api.tuweb.com/datos', { method: 'GET', credentials: 'include' })
.then(response => response.json())
.then(data => console.log(data));

2. Si utilizas Axios, configura la instancia global para permitir credenciales:

axios.defaults.withCredentials = true;