¿Qué es CORS? Guía Completa y Solución de Errores Comunes

Si eres desarrollador web, seguro que te has encontrado con este mensaje en rojo en la consola de tu navegador y has querido gritar:

Access to fetch at 'https://api.example.com/data' from origin 'https://my-app.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

¡Tranquilo! No estás solo. El error de CORS (Cross-Origin Resource Sharing) es uno de los más comunes y, a la vez, uno de los que más dolores de cabeza causa a los desarrolladores, tanto juniors como seniors.

En este artículo, vamos a desmitificar CORS. Te explicaré qué es, cómo funciona realmente (sin tecnicismos aburridos) y, lo más importante, cómo solucionarlo.

¿Qué es exactamente CORS?

CORS significa Intercambio de Recursos de Origen Cruzado. Es un mecanismo de seguridad que permite a un servidor indicar desde qué otros orígenes (dominios) se permite cargar recursos.

Para entenderlo, primero debemos hablar de la Política del Mismo Origen (Same-Origin Policy o SOP).
Por defecto, los navegadores son muy desconfiados. Por seguridad, impiden que una página web haga peticiones a un dominio diferente al suyo.
Imagina que entras en web-maliciosa.com. Si no existiera esta protección, esa web podría hacer peticiones a tu-banco.com usando tus credenciales guardadas en el navegador. ¡Un desastre!

Sin embargo, hoy en día es muy común tener el frontend en un sitio (ej. localhost:3000) y el backend en otro (ej. localhost:5000). Aquí es donde entra CORS: es la forma segura de decirle al navegador: "Oye, confío en este sitio, déjale pasar".

¿Cómo funciona CORS? (La parte técnica simplificada)

Todo se basa en cabeceras HTTP. Es como una conversación entre el navegador y el servidor.

1. Peticiones Simples

Si tu petición es sencilla (usando GET, HEAD o POST con cabeceras estándar), el navegador la envía directamente, pero añade una cabecera Origin:

GET /api/datos HTTP/1.1
Origin: https://mi-app.com

Si el servidor acepta a ese origen, responde con:

HTTP/1.1 200 OK
Access-Control-Allow-Origin: https://mi-app.com

Si esa cabecera no está en la respuesta, el navegador bloquea los datos y muestra el famoso error rojo.

2. Peticiones con Preflight (Pre-vuelo)

Si intentas hacer algo más complejo, como usar PUT, DELETE o enviar un JSON (Content-Type: application/json), el navegador es más precavido. Antes de enviar la petición real, envía una petición de prueba llamada Preflight usando el método OPTIONS.

Navegador: "¿Puedo enviar un POST con JSON desde mi-app.com?"
Servidor: "Sí, permito mi-app.com y el método POST."

Solo después de esta confirmación, el navegador envía la petición real.

Errores Comunes y Soluciones

Aquí viene la parte que te interesa: ¿cómo arreglo esto?

Error 1: Falta la cabecera 'Access-Control-Allow-Origin'

Este es el clásico. Significa que el servidor no está configurado para aceptar peticiones desde tu frontend.

Solución:
Tienes que configurar el Backend. No intentes arreglarlo en el frontend (a menos que uses un proxy).

Node.js (Express): Instala el paquete cors.

const cors = require('cors');
app.use(cors({ origin: 'https://mi-app.com' }));

Python (Flask/Django): Busca la librería de CORS correspondiente (ej. flask-cors).

Error 2: El comodín '*' no funciona con credenciales

Si estás enviando cookies o tokens de autenticación (withCredentials: true), no puedes usar Access-Control-Allow-Origin: *. El navegador lo prohíbe por seguridad.

Solución:
El servidor debe devolver explícitamente el origen que hace la petición.

Access-Control-Allow-Origin: https://mi-app.com
Access-Control-Allow-Credentials: true

Error 3: CORS en entorno local (Localhost)

Es muy molesto configurar CORS solo para desarrollar en tu máquina.

Solución: Usar un Proxy
La mayoría de herramientas modernas (Vite, Next.js, Create React App) permiten configurar un proxy en el archivo de configuración.
Esto hace que el navegador crea que está hablando con el mismo servidor, evitando CORS por completo durante el desarrollo.

// Ejemplo en vite.config.js
proxy: {
  '/api': {
    target: 'http://localhost:5000',
    changeOrigin: true,
  }
}

Conclusión

CORS no es tu enemigo, es el guardaespaldas de tus usuarios. Entender cómo funciona te ayudará a depurar errores mucho más rápido y a construir aplicaciones más seguras.

Espero que esta guía te haya servido para aclarar dudas. ¡La próxima vez que veas el error rojo, ya sabrás exactamente qué hacer!

Si necesitas trabajar con datos JSON y asegurarte de que están bien formados antes de enviarlos a tu API, te recomiendo probar nuestra herramienta Validador y Formateador JSON. ¡Es súper útil para evitar errores tontos de sintaxis!

¡Feliz código! 🚀