Introducción al Error CORS en JavaScript
El error CORS (Cross-Origin Resource Sharing) es uno de los dolores de cabeza más comunes para los desarrolladores web frontend cuando intentan consumir APIs desde un dominio, puerto o protocolo diferente al del servidor de origen. Cuando realizas una petición mediante la Fetch API o Axios, el navegador bloquea la respuesta por razones de seguridad, mostrando en la consola un mensaje como Access to fetch at 'URL' from origin 'null' has been blocked by CORS policy.
Causas Principales del Error CORS
Este mecanismo de seguridad del navegador se activa debido a varios factores comunes en el desarrollo moderno:
- El servidor backend no incluye las cabeceras HTTP necesarias para permitir solicitudes desde tu origen frontend.
- Intentas realizar una petición con credenciales (como cookies o tokens de autorización) sin la configuración adecuada en el cliente y el servidor.
- El navegador bloquea solicitudes previas de tipo
OPTIONS(peticiones de verificación previa o preflight) porque el servidor no las responde correctamente.
Método 1: Configurar las Cabeceras HTTP en el Servidor (Backend)
La solución más robusta y recomendada es configurar tu servidor backend para que permita explícitamente las solicitudes desde tu dominio frontend. Dependiendo de tu tecnología, debes añadir las siguientes cabeceras HTTP en cada respuesta:
Ejemplo básico en Node.js con Express:
app.use((req, res, next) => { res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000'); res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE'); res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization'); next();});- Identifica el archivo principal de configuración de tu servidor backend.
- Añade el middleware o las directivas para aceptar el origen de tu aplicación frontend.
- Reinicia el servidor backend y verifica que las peticiones Fetch ya no arrojen el error en la consola.
Método 2: Configurar un Proxy Inverso en Desarrollo
Si estás desarrollando una aplicación de frontend (por ejemplo, con React, Vue o Vite) y no tienes acceso para modificar el servidor backend de terceros o de producción, puedes configurar un proxy local en tu entorno de desarrollo.
Si usas Vite, edita tu archivo vite.config.js de la siguiente manera:
export default defineConfig({ server: { proxy: { '/api': { target: 'https://api.ejemplo.com', changeOrigin: true, rewrite: (path) => path.replace(/^/api/, '') } } }});- Modifica tu archivo de configuración del empaquetador frontend (Vite, Webpack, etc.).
- Redirige las rutas locales que comiencen con
/apihacia la URL del servidor externo. - Actualiza tus peticiones Fetch en JavaScript para que apunten a la ruta local relativa (ej.
fetch('/api/datos')) en lugar de la URL absoluta.