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

¿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 modernos. Su función principal es restringir 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 una API backend independiente (en http://localhost:5000), el navegador bloquea la respuesta y muestra el típico mensaje de error en la consola: 'Access to fetch at '...' from origin '...' has been blocked by CORS policy'.

Causas principales del bloqueo CORS

• El servidor backend no incluye las cabeceras HTTP necesarias para autorizar el origen de la petición.
• Se intenta enviar credenciales (como cookies o tokens de autorización) sin la configuración adecuada en el cliente y el servidor.
• Las solicitudes de tipo preflight (método OPTIONS) fallan o no son respondidas correctamente por el servidor API.

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

La forma más rápida y recomendada de solucionar este inconveniente en un entorno backend 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 (por ejemplo, app.js o server.js):

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

// Habilitar CORS para todas las rutas
app.use(cors());

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

Método 2: Configurar dominios específicos y opciones avanzadas

Si estás en un entorno de producción, permitir el acceso a cualquier dominio mediante cors() genérico puede representar un riesgo de seguridad. Es recomendable restringir el acceso únicamente a tu dominio autorizado.

Modifica la configuración del middleware especificando la opción origin:

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

app.use(cors(corsOptions));

Método 3: Configurar un Proxy en el Frontend durante el desarrollo

Si no tienes acceso para modificar el código del servidor backend, puedes evitar las restricciones CORS configurando un proxy local en tu entorno de desarrollo frontend.

1. Si utilizas React con create-react-app, añade la propiedad proxy en tu archivo package.json:
   "proxy": "http://localhost:5000"
2. Si utilizas Vite, configura el proxy en el archivo vite.config.js:
   export default defineConfig({
  server: {
    proxy: {
      '/api': 'http://localhost:5000'
    }
  
  }
});

Implementando cualquiera de estos métodos podrás eliminar los bloqueos de origen cruzado y lograr que tu aplicación frontend y backend se comuniquen sin problemas.