Cómo Solucionar el Error CORS (Cross-Origin Resource Sharing) en JavaScript Paso a Paso

Introducción al Error CORS en JavaScript

Cuando desarrollas aplicaciones web modernas utilizando JavaScript, es muy común encontrarse con el temido error CORS (Cross-Origin Resource Sharing) en la consola del navegador. Este mecanismo de seguridad implementado por los navegadores web bloquea las solicitudes HTTP realizadas desde un dominio (origen) hacia un dominio diferente, protegiendo así a los usuarios de ataques maliciosos como el robo de datos.

Causas Principales del Error CORS

El error se desencadena principalmente debido a las siguientes razones:

• El servidor backend no incluye las cabeceras HTTP necesarias (como Access-Control-Allow-Origin).
• Estás intentando realizar peticiones desde un puerto o protocolo diferente (por ejemplo, desde http://localhost:3000 a http://localhost:5000).
• La petición incluye credenciales o métodos HTTP no permitidos por la política de seguridad del servidor.

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

La forma más limpia y recomendada de solucionar CORS es configurar tu servidor backend para que permita solicitudes desde tu origen de desarrollo o producción. Si utilizas Express en Node.js, puedes hacerlo instalando el paquete oficial cors.

1. Instala el paquete ejecutando el siguiente comando en tu terminal:
   npm install cors
2. Importa y utiliza el middleware en tu archivo principal de servidor (por ejemplo, server.js):
   const cors = require('cors');
const express = require('express');
const app = express();
app.use(cors());
3. Reinicia tu servidor backend para aplicar los cambios y vuelve a intentar la petición desde tu frontend.

Método 2: Usar un Servidor Proxy Inverso en el Entorno de Desarrollo

Si no tienes acceso al código del servidor backend o estás consumiendo una API externa de terceros, puedes evitar las restricciones CORS configurando un proxy en tu herramienta de empaquetado o framework frontend, como Vite o React.

1. Abre el archivo de configuración de tu entorno de desarrollo (por ejemplo, vite.config.js).
2. Agrega la sección de proxy para redirigir las peticiones locales:
   export default defineConfig({
server: {
proxy: {
'/api': {
target: 'https://api.ejemplo.com',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
}
}
}
});
3. Modifica tus peticiones en JavaScript para que apunten a tu ruta local /api en lugar de la URL externa completa.

Conclusión

El error CORS puede parecer frustrante al principio, pero es un pilar fundamental para la seguridad web. Configurando correctamente las cabeceras en tu servidor o utilizando un proxy durante la fase de desarrollo, podrás eliminar este obstáculo y mantener tus aplicaciones comunicándose sin problemas.