Cómo Solucionar el Error CORS (Cross-Origin Resource Sharing) Paso a Paso

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

El intercambio de recursos de origen cruzado (CORS, por sus siglas en inglés) 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, previniendo así ataques maliciosos como el robo de datos o CSRF.

Cuando intentas conectar tu aplicación frontend (por ejemplo, en React o Vue ejecutándose en http://localhost:3000) con un backend independiente (como una API en Node.js en http://localhost:5000), el navegador bloquea la respuesta y muestra un error en la consola similar a: Access to fetch at 'http://localhost:5000/api' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Causas principales del bloqueo CORS

1. El servidor backend no incluye las cabeceras HTTP necesarias para autorizar peticiones desde orígenes externos.
2. Intentar realizar peticiones con credenciales (como cookies o tokens de autorización) sin la configuración adecuada en el cliente y el servidor.
3. Falta de manejo para las solicitudes de tipo OPTIONS (llamadas preflight o de sondeo previo) que el navegador envía automáticamente antes de métodos como POST, PUT o DELETE.

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

La forma más limpia y recomendada de resolver este problema en un servidor Express de Node.js es utilizando el middleware oficial cors.

1. Instala el paquete en tu proyecto ejecutando el siguiente comando en la terminal:
   npm install cors
2. Importa y configura el middleware en tu archivo principal de servidor (por ejemplo, app.js o server.js):

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

// Habilitar CORS para todas las rutas y orígenes
app.use(cors());

app.get('/api/data', (req, res) => {
  res.json({ message: '¡CORS configurado con éxito!' });
app.listen(5000, () => console.log('Servidor corriendo en puerto 5000'));

Método 2: Configurar CORS personalizado para entornos de producción

Si tu aplicación va a pasar a producción, permitir peticiones desde cualquier origen (usando app.use(cors()) de forma abierta) puede ser un riesgo de seguridad. Debes restringir el acceso únicamente a tu dominio autorizado.

1. Modifica la configuración del middleware especificando la opción origin con una lista blanca de URLs permitidas:

const whitelist = ['https://tudominio.com', 'http://localhost:3000'];
const corsOptions = {
  origin: function (origin, callback) {
    if (!origin || whitelist.indexOf(origin) !== -1) {
      callback(null, true);
    } else {
      callback(new Error('Bloqueado por la política CORS'));
    }
  }
};

app.use(cors(corsOptions));

Método 3: Configurar cabeceras HTTP manuales sin librerías externas

Si por alguna razón no puedes utilizar paquetes externos en tu servidor backend, puedes añadir las cabeceras HTTP de forma manual mediante un middleware personalizado.

1. Crea una función middleware que interceptes las peticiones antes de llegar a tus rutas:

app.use((req, res, next) => {
  res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000');
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
  if (req.method === 'OPTIONS') {
    return res.sendStatus(200);
  }
  next();
});

Siguiendo estos pasos, podrás eliminar por completo los errores de política de origen cruzado y permitir una comunicación fluida entre tu cliente y tu servidor.