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 una medida de seguridad implementada por los navegadores web que restringe las solicitudes HTTP realizadas desde un dominio (origen) hacia un servidor ubicado en un dominio diferente. Cuando desarrollas aplicaciones web en JavaScript y tratas de consumir una API externa que no tiene configurados los encabezados correctos, el navegador bloquea la respuesta automáticamente mostrando un mensaje en la consola del tipo: Access to fetch at 'URL' from origin 'null' has been blocked by CORS policy.

Causas Principales del Error CORS

Las causas más comunes por las cuales te enfrentas a este problema mientras programas incluyen:

• El servidor de la API no incluye el encabezado Access-Control-Allow-Origin en su respuesta.
• Intentas realizar peticiones con credenciales (como cookies o tokens de autorización) sin la configuración adecuada en el cliente y el servidor.
• Estás utilizando un método HTTP (como PUT, DELETE o encabezados personalizados) que requiere una solicitud previa de comprobación (preflight request con el método OPTIONS), la cual es rechazada por el servidor.

Método 1: Configurar los Encabezados HTTP en el Servidor (Backend)

La solución más robusta y recomendada para producción es configurar el servidor backend para que permita solicitudes desde tu dominio de frontend. Si estás utilizando Node.js con Express, puedes hacerlo fácilmente instalando y configurando el paquete cors.

1. Instala el paquete ejecutando el comando npm install cors en tu terminal.
2. Importa y utiliza el middleware en tu archivo principal de la aplicación:

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

// Permitir CORS para todos los origenes
app.use(cors());

app.get('/api/data', (req, res) => {
  res.json({ message: '¡CORS solucionado!' });
});

app.listen(3000);

Método 2: Utilizar un Proxy Inverso Durante el Desarrollo

Si estás desarrollando en local y no tienes acceso al código fuente del servidor backend para modificar los encabezados CORS, puedes configurar un proxy en tu entorno de desarrollo. Herramientas como Vite, Webpack o Vue CLI permiten redirigir las peticiones.

1. Si usas Vite, abre tu archivo vite.config.js.
2. Añade la configuración de server.proxy para redirigir las peticiones:

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

Método 3: Instalar una Extensión en el Navegador para Pruebas Rápidas

Para propósitos estrictamente de pruebas y depuración local, puedes desactivar temporalmente las restricciones de CORS en tu navegador utilizando extensiones dedicadas.

1. Busca e instala una extensión como CORS Unblock o Allow CORS: Access-Control-Allow-Origin en la tienda de tu navegador (Chrome o Firefox).
2. Activa la extensión antes de realizar tus pruebas de fetch o axios en local.
3. Nota importante: No utilices este método como solución final para producción, ya que dejará a los usuarios finales expuestos a vulnerabilidades de seguridad si no configuran sus navegadores.