Cómo Solucionar el Error CORS en JavaScript Paso a Paso

Introducción al Error CORS en el Desarrollo Web

Uno de los dolores de cabeza más frecuentes para los desarrolladores frontend y backend es encontrarse con el temido error CORS (Cross-Origin Resource Sharing) en la consola del navegador. Este mecanismo de seguridad implementado por los navegadores bloquea las peticiones HTTP realizadas desde un dominio (origen) hacia un servidor ubicado en un dominio diferente, a menos que el servidor permita explícitamente estas conexiones.

Causas Principales del Error CORS

El error se desencadena principalmente debido a:

• Intentar consumir una API desde http://localhost:3000 hacia un servidor en https://api.midominio.com sin la autorización correspondiente.
• Falta de las cabeceras HTTP necesarias en las respuestas del servidor backend.
• Peticiones con credenciales (cookies o cabeceras de autorización) no permitidas explícitamente por la política del servidor.

Método 1: Configurar las Cabeceras HTTP en el Servidor (Node.js/Express)

La forma más limpia y robusta de solucionar CORS es configurando el servidor para que acepte solicitudes del origen de tu aplicación. Si utilizas Node.js con Express, puedes hacerlo utilizando el paquete oficial cors.

1. Instala el paquete en tu proyecto backend ejecutando el siguiente comando en tu terminal: npm install cors
2. Importa y utiliza el middleware en tu archivo principal (ej. server.js o app.js):

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

Si deseas restringir el acceso únicamente a tu dominio de producción, puedes configurarlo de la siguiente manera:

const corsOptions = { origin: 'https://tu-frontend-web.com' };
app.use(cors(corsOptions));

Método 2: Utilizar un Proxy en el Entorno de Desarrollo

Si estás desarrollando localmente y no tienes acceso para modificar el código del servidor backend al que realizas las peticiones, puedes configurar un proxy en tu herramienta de desarrollo (como Vite, React Scripts o Vue CLI).

1. Si usas Vite, abre tu archivo vite.config.js y añade la siguiente configuración dentro del objeto defineConfig:

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

1. De esta manera, en lugar de apuntar directamente al servidor externo, realizarás tus peticiones a /api y el entorno de desarrollo redirigirá la solicitud evitando el bloqueo del navegador.