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

¿Qué es el error CORS y por qué ocurre en JavaScript?

El error CORS (Cross-Origin Resource Sharing) es un mecanismo de seguridad implementado por los navegadores web que restringe las solicitudes HTTP realizadas desde un dominio (origen) hacia un servidor ubicado en un dominio diferente. Cuando intentas consumir una API desde tu aplicación de frontend (por ejemplo, React, Vue o JavaScript vainilla) y el servidor no incluye las cabeceras HTTP adecuadas, el navegador bloquea la respuesta de manera automática.

Causas principales del bloqueo CORS

• El servidor backend no incluye la cabecera Access-Control-Allow-Origin en sus respuestas.
• Se intenta enviar credenciales (como cookies o tokens de autorización) sin la configuración correcta en las peticiones fetch o axios.
• El navegador bloquea solicitudes con métodos HTTP personalizados (como PUT, DELETE) debido a que no se ha respondido correctamente a la petición previa de tipo OPTIONS (preflight request).

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

La forma más robusta y recomendada de solucionar el error CORS es configurando tu servidor backend para que permita explícitamente el origen de tu aplicación frontend.

1. Instala el paquete oficial de CORS en tu proyecto de Express ejecutando: npm install cors
2. Importa y utiliza el middleware en tu archivo principal (ej. app.js o server.js):

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

// Permitir todos los orígenes (solo para desarrollo)
app.use(cors());

// O configurar un origen específico y permitir credenciales
const corsOptions = {
  origin: 'http://localhost:3000',
  credentials: true
};
app.use(cors(corsOptions));

Método 2: Configurar un proxy inverso durante el desarrollo (Webpack / Vite / React)

Si no tienes acceso para modificar el código del servidor backend o estás consumiendo una API de terceros, puedes evitar las restricciones CORS configurando un proxy en tu herramienta de desarrollo frontend.

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/, '')
      }
    }
  
  }
});

Al realizar tus peticiones fetch apuntando a /api/recurso en lugar de la URL completa, el entorno de desarrollo redirigirá la petición saltándose la política del navegador.