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

Introducción al Error CORS en JavaScript

El error CORS (Cross-Origin Resource Sharing) es uno de los problemas más comunes a los que se enfrentan los desarrolladores web al intentar conectar un frontend (por ejemplo, desarrollado en React o Vue) con una API alojada en un dominio o puerto diferente. Los navegadores modernos bloquean estas peticiones por defecto por razones de seguridad.

Causas Principales del Error CORS

El mecanismo de seguridad del navegador se activa por las siguientes razones:

• El servidor de la API no incluye las cabeceras HTTP necesarias (como Access-Control-Allow-Origin).
• La petición se realiza desde un origen (protocolo, dominio o puerto) no autorizado.
• Se envían credenciales o cabeceras personalizadas sin la autorización previa del servidor mediante una petición de tipo OPTIONS (preflight).

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

La forma más limpia y definitiva de solucionar el problema es configurar el servidor backend para que permita solicitudes desde tu origen de desarrollo o producción.

1. Instala el paquete CORS en tu proyecto de Node.js ejecutando: npm install cors
2. Importa y utiliza el middleware en tu archivo principal de Express:

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,://tudominio.com' };
app.use(cors(corsOptions));

Método 2: Utilizar un Proxy Inverso en Desarrollo

Si no tienes acceso al código del servidor backend y estás en fase de desarrollo local, puedes configurar un proxy en tu entorno frontend para evitar las restricciones del navegador.

1. Si utilizas Vite, abre tu archivo vite.config.js y añade la propiedad server.proxy:

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

De esta forma, tus peticiones locales a /api serán redirigidas por el servidor de desarrollo simulando el mismo origen y evitando el bloqueo CORS.