Introducción al Error CORS en el Desarrollo Web
Uno de los problemas más frustrantes a los que se enfrentan los desarrolladores web al conectar su frontend (por ejemplo, en React, Vue o JavaScript vainilla) con su API en Node.js o Express es el temido error de CORS (Cross-Origin Resource Sharing). Este mecanismo de seguridad de los navegadores bloquea las peticiones HTTP realizadas desde un origen (dominio, protocolo o puerto) diferente al del servidor de recursos.
Si al abrir la consola de tu navegador visualizas un mensaje como 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, no te preocupes. A continuación, exploraremos las causas y las mejores soluciones definitivas.
Causas Principales del Bloqueo CORS
El error CORS no es un fallo de programación en sí, sino una medida de seguridad implementada por los navegadores web modernos basada en la Política de Mismo Origen (Same-Origin Policy). Las causas más habituales son:
- Intentar consumir una API desde un puerto diferente (ej. frontend en 3000 y backend en 5000).
- Falta de los encabezados HTTP necesarios en las respuestas del servidor backend.
- Peticiones con credenciales (cookies o cabeceras de autorización) que no están permitidas explícitamente por el servidor.
Método 1: Configurar CORS en Node.js y Express (Solución Definitiva)
La forma más rápida y recomendada de solucionar este inconveniente en un entorno de Node.js con Express es utilizando el paquete oficial cors. Sigue estos pasos para implementarlo correctamente:
- Abre tu terminal en la carpeta del proyecto backend.
- Instala el paquete ejecutando el siguiente comando:
npm install cors - Abre tu archivo principal de servidor (ej.
server.jsoapp.js) e importa el módulo. - Añade el middleware antes de definir tus rutas con una configuración personalizada si es necesario.
Ejemplo de código de implementación:
const express = require('express');
const cors = require('cors');
const app = express();
// Configuración básica para permitir todos los orígenes
app.use(cors());
// O configuración avanzada recomendada para producción:
const corsOptions = {
origin: 'http://localhost:3000',
optionsSuccessStatus: 200
};
app.get('/api/data', cors(corsOptions), (req, res) => {
res.json({ message: '¡CORS configurado con éxito!' });
});
app.listen(5000, () => console.log('Servidor corriendo en puerto 5000'));Método 2: Usar un Proxy de Desarrollo en el Frontend
Si estás trabajando en un entorno de desarrollo local (con React, Vite o Vue) y no puedes modificar el servidor backend inmediatamente, puedes configurar un proxy en tu herramienta de empaquetado para evitar restricciones de origen.
Si usas Vite, puedes modificar tu archivo vite.config.js de la siguiente manera:
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig({
plugins: [react()],
server: {
proxy: {
'/api': {
target: 'http://localhost:5000',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
}
}
}
});De esta forma, el navegador creerá que estás realizando peticiones al mismo dominio y puerto, evitando por completo el bloqueo CORS durante tu fase de desarrollo local.