Qué es CORS y cómo resolver errores de bloqueo en el navegador

¿Por qué el navegador bloquea solicitudes cross-origin?

¿Alguna vez te has encontrado con ese error temido en la consola del desarrollador indicando que la solicitud fue bloqueada por una política CORS? Esto ocurre debido a la Same-Origin Policy (SOP), una medida de seguridad fundamental que prohíbe que un script ejecutándose en un dominio intente leer datos de un dominio distinto. Sin esta protección, cualquier sitio malicioso que visitaras podría realizar peticiones en tu nombre a tu banco o correo electrónico, aprovechando tu sesión iniciada. CORS (Cross-Origin Resource Sharing) es simplemente el mecanismo que permite al servidor decirle al navegador: 'Confío en este dominio externo, permite el acceso'. Cuando esta autorización falta, el navegador, por seguridad, deniega la operación.

Cómo funcionan los preflight requests

Muchas personas piensan que CORS es un problema de red, pero en realidad es una coreografía entre el navegador y el servidor. Cuando realizamos peticiones simples, como un GET, el navegador envía el pedido directamente. Sin embargo, si la solicitud es 'compleja' —por ejemplo, al enviar JSON en un POST o incluir encabezados personalizados como tokens de autenticación—, el navegador envía un 'preflight request' primero. Este pedido utiliza el método OPTIONS para preguntar al servidor: '¿Puedo hacer esta operación específica desde este origen?'. Si el servidor responde correctamente, el navegador continúa con la solicitud real.

Cómo configurar encabezados para autorizar peticiones

Resolver errores de CORS requiere que tu backend envíe los encabezados de respuesta adecuados. No intentes solucionar esto con código en el frontend, ya que el bloqueo ocurre dentro de la lógica del motor del navegador. Debes configurar tu servidor para devolver el encabezado Access-Control-Allow-Origin, preferiblemente apuntando al dominio específico que requiere acceso. Para depurar, puedes verificar el tráfico usando herramientas como cURL, que ayudan a visualizar qué encabezados está entregando realmente el servidor antes de que la respuesta sea descartada.

Access-Control-Allow-Origin: https://tu-sitio.com
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Headers: Content-Type, Authorization

Si experimentas comportamientos extraños en tu infraestructura, recuerda monitorear los logs de tu servidor web, tal como lo harías al investigar peticiones HTTP lentas en Nginx. A menudo, el error CORS es solo el síntoma de una petición que falló por otra causa, como un tiempo de espera excedido o un error 500 en el backend. Para profundizar en estos conceptos arquitectónicos en producción, consulte también nuestro análisis técnico sobre Cómo usar el comando dd en Linux para clonar discos de forma segura.

Consideraciones finales sobre seguridad y CORS

El mayor error que cometen los desarrolladores al manejar CORS es usar el comodín Access-Control-Allow-Origin: *. Aunque esto elimina el error de bloqueo al instante, dejas expuesto tu servidor a cualquier página de internet. Siempre prefiere listar explícitamente los orígenes permitidos en la configuración de tu backend. Además, recuerda que CORS protege al usuario dentro del navegador; las APIs públicas que no utilizan autenticación basada en sesión pueden no necesitar esta protección tan rígida si han sido diseñadas correctamente desde el principio.