Cómo Solucionar el Error CORS en JavaScript de Forma Definitiva

¿Qué es el error CORS en JavaScript 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. Este sistema restringe las solicitudes HTTP realizadas desde scripts hacia un dominio diferente al que sirvió la página original, previniendo ataques de falsificación de peticiones en sitios cruzados (CSRF).

Cuando intentas consumir una API desde un origen distinto (por ejemplo, frontend en http://localhost:3000 y backend en http://api.misitio.com) sin la configuración adecuada, el navegador bloquea la respuesta y muestra el temido mensaje en la consola de desarrollo: Access to fetch at '...' from origin '...' has been blocked by CORS policy.

Causas principales del bloqueo CORS

• Falta de las cabeceras HTTP de control de acceso en el servidor de destino.
• Intento de enviar credenciales (como cookies o tokens de autorización) sin el permiso explícito del servidor.
• Uso de métodos HTTP no permitidos (como PUT, DELETE o cabeceras personalizadas) que activan solicitudes de verificación previa (preflight requests con OPTIONS).
• Configuración incorrecta del proxy de desarrollo en frameworks como React, Vue o Angular.

Método 1: Configurar las cabeceras CORS en el servidor Backend (Node.js/Express)

La forma más robusta de solucionar CORS es configurar tu servidor backend para que permita solicitudes desde el origen de tu aplicación frontend. Si utilizas Node.js con Express, puedes implementar el paquete oficial cors siguiendo estos pasos:

1. Instala el paquete ejecutando npm install cors en la terminal de tu proyecto backend.
2. Importa y habilita el middleware en tu archivo principal (ej. app.js o server.js).

const express = require('express');

const cors = require('cors');

const app = express();

// Habilitar CORS para todos los origenes (solo desarrollo)

app.use(cors());

// O configurar origenes especificos para produccion

const corsOptions = { origin: 'https://tudominiofrontend.com', optionsSuccessStatus: 200 };

app.get('/api/datos', cors(corsOptions), (req, res) => { res.json({ mensaje: '¡Acceso permitido!' }); });

Método 2: Configurar un Proxy en el Entorno de Desarrollo (React / Vue)

Si estás desarrollando una aplicación de una sola página (SPA) y no tienes control sobre el servidor backend, puedes evitar el error CORS durante la fase de desarrollo configurando un proxy local en tu herramienta de empaquetado o framework.

1. Si usas Vite (común en Vue y React modernos), abre tu archivo vite.config.js y añade la propiedad server.proxy.
2. Configura el reenvío de peticiones para que el navegador crea que se originan en el mismo servidor local.

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

Método 3: Gestionar solicitudes Preflight (OPTIONS)

Para peticiones complejas (que usan métodos diferentes a GET/POST o incluyen cabeceras personalizadas), el navegador envía primero una petición HTTP de tipo OPTIONS. Asegúrate de que tu servidor responda correctamente a estas peticiones con un código de estado 200 o 204 y las cabeceras correspondientes:

res.header('Access-Control-Allow-Origin', '*');

res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');

res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');