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

¿Qué es el Error de 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 modernos. Este sistema restringe las solicitudes HTTP realizadas desde scripts hacia un origen diferente al que sirvió la página principal, basándose en la política de el mismo origen (Same-Origin Policy).

Cuando desarrollas aplicaciones web desacopladas, es muy común encontrarse con el error: Access to fetch at 'http://localhost:3000/api' from origin 'http://localhost:5173' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Esto detiene la comunicación entre tu frontend y tu backend, impidiendo que los datos fluyan correctamente.

Causas Principales del Bloqueo CORS

• El servidor backend no incluye las cabeceras HTTP necesarias para permitir solicitudes desde el dominio o puerto del frontend.
• Se intenta enviar credenciales (como cookies o tokens de autorización) sin la configuración adecuada en la solicitud fetch o axios.
• Las solicitudes preflight (método OPTIONS) no están siendo manejadas correctamente por el servidor.

Método 1: Solucionar CORS en el Backend con Node.js y Express

La forma más rápida y recomendada de solucionar este problema en un entorno de Node.js es utilizando el middleware oficial cors. Sigue estos pasos para configurarlo:

1. Instala el paquete en tu proyecto ejecutando el siguiente comando en tu terminal: npm install cors
2. Abre el archivo principal de tu servidor (por ejemplo, server.js o app.js).
3. Importa e implementa el middleware antes de declarar tus rutas:

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(3000, () => console.log('Servidor corriendo en puerto 3000'));

Método 2: Configuración Avanzada de CORS para Producción

Si tu aplicación va a pasar a producción, dejar el acceso abierto (*) puede representar un riesgo de seguridad. Debes restringir los orígenes permitidos:

1. Define una lista blanca con los dominios autorizados para consumir tu API.
2. Modifica la inicialización del middleware de CORS pasando un objeto de configuración:

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

app.use(cors(corsOptions));

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

Si no tienes acceso al código del servidor backend y estás desarrollando localmente, puedes evitar las restricciones de CORS configurando un proxy en tu herramienta de empaquetado como Vite o Webpack.

1. Abre el archivo de configuración de tu bundler (por ejemplo, vite.config.js).
2. Agrega la propiedad server.proxy para redirigir las peticiones locales:

export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://api.externa.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
});