Cómo Solucionar el Error CORS (Cross-Origin Resource Sharing) en JavaScript de Forma Definitiva

¿Qué es el error CORS en JavaScript?

El error CORS (Cross-Origin Resource Sharing o Intercambio de Recursos de Origen Cruzado) es un mecanismo de seguridad implementado por los navegadores web. Este mecanismo restringe las solicitudes HTTP de origen cruzado iniciadas desde scripts. Ocurre cuando tu aplicación frontend (por ejemplo, ejecutada en http://localhost:3000) intenta consumir una API alojada en un dominio diferente (como https://api.tudominio.com) sin el permiso explícito del servidor mediante cabeceras HTTP específicas.

Causas principales del bloqueo CORS

Existen diversos motivos por los cuales el navegador bloquea una petición mediante CORS:

• Falta de las cabeceras HTTP Access-Control-Allow-Origin en las respuestas del servidor.
• Intento de enviar credenciales (como cookies o tokens de autorización) sin la configuración adecuada en el cliente y el servidor.
• Uso de métodos HTTP no permitidos (como PUT, DELETE o cabeceras personalizadas) sin pasar por una petición de verificación previa (preflight request con OPTIONS).
• Desajustes en el protocolo (HTTP vs HTTPS) o en los puertos de origen entre el cliente y el servidor.

Método 1: Configurar las cabeceras HTTP en el servidor backend (Node.js con Express)

La forma más directa y recomendada de solucionar CORS es configurar tu servidor para que permita solicitudes desde el origen de tu frontend. Si utilizas Node.js con Express, puedes hacerlo manualmente o utilizando el paquete oficial cors.

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

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

Si deseas configurar restricciones de seguridad para permitir únicamente un dominio específico, puedes pasar un objeto de configuración:

const corsOptions = { origin: 'http://localhost:3000', optionsSuccessStatus: 200 };
app.use(cors(corsOptions));

Método 2: Configurar un Proxy inverso en el entorno de desarrollo (React / Vue / Vite)

Si no tienes acceso para modificar el código del servidor backend o estás consumiendo una API de terceros durante la fase de desarrollo, puedes configurar un proxy en tu herramienta de empaquetado o framework frontend para enrutar las peticiones como si fueran del mismo origen.

1. Si estás utilizando Vite en tu proyecto, abre el archivo vite.config.js y añade la propiedad server.proxy dentro de defineConfig:

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

1. Modifica tus peticiones en JavaScript para que apunten a la ruta relativa (ej. fetch('/api/recurso')) en lugar de la URL absoluta. El entorno de desarrollo redirigirá la solicitud omitiendo las restricciones CORS del navegador.

Conclusión

El error CORS es un estándar de seguridad web fundamental que puede solucionarse fácilmente configurando correctamente las cabeceras HTTP en el servidor backend o empleando un proxy durante el desarrollo frontend. Aplicando estos métodos, tus peticiones HTTP volverán a funcionar sin interrupciones.