Cómo Solucionar el Error 'CORS Policy' en JavaScript y Node.js Paso a Paso

Introducción al Error CORS

Uno de los dolores de cabeza más comunes para los desarrolladores web frontend y backend es encontrarse con el temido mensaje en la consola del navegador: Access to fetch at 'http://localhost:3000/api' from origin 'http://localhost:5173' has been blocked by CORS policy. Este error ocurre debido a una medida de seguridad implementada por los navegadores web modernos conocida como Same-Origin Policy (Política de Mismo Origen), la cual impide que una página web realice peticiones a un dominio, puerto o protocolo diferente al que sirvió la página original.

Causas Principales del Bloqueo CORS

El bloqueo no significa que tu código esté mal escrito o que el servidor esté caído. Las causas principales incluyen:

• El servidor backend no incluye las cabeceras HTTP necesarias para autorizar peticiones externas.
• Estás intentando consumir una API desde un origen (dominio o puerto) no autorizado.
• El navegador bloquea las peticiones de tipo preflight (método OPTIONS) porque el servidor no responde correctamente a estas verificaciones previas.

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

La forma más rápida y recomendada de solucionar este problema si estás desarrollando una API con Node.js y Express es utilizando el paquete oficial cors. Sigue estos pasos para configurarlo:

1. Abre la terminal en la raíz de tu proyecto backend.
2. Instala el paquete ejecutando el siguiente comando: npm install cors
3. Abre tu archivo principal de servidor (ej. server.js o app.js).
4. Importa y habilita el middleware antes de definir tus rutas:

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

Método 2: Configurar Cabeceras HTTP Manualmente en el Servidor

Si no deseas instalar dependencias adicionales en tu backend, puedes añadir manualmente las cabeceras de control de acceso necesarias directamente en las respuestas HTTP de tu servidor. Esto es útil para frameworks personalizados o servidores nativos en Node.js, PHP u otros lenguajes.

1. Localiza el archivo o controlador donde manejas las respuestas de la API.
2. Añade las siguientes cabeceras HTTP en todas las respuestas salientes:

res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');

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

Si estás trabajando con herramientas modernas como Vite, Vue CLI o Create React App y no tienes acceso al código del servidor backend, puedes configurar un proxy de desarrollo para saltarte las restricciones CORS en tu entorno local.

1. Si usas Vite, abre tu archivo vite.config.js.
2. Añade la configuración del servidor proxy dentro del objeto defineConfig:

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