Petición por CORS cuando comencé a trabajar en desarrollo web, uno de los obstáculos más recurrentes fue enfrentar la petición por CORS y sus errores asociados. Tras años de experiencia, puedo decir con certeza que entender este concepto es clave para cualquier persona que desarrolle aplicaciones que consuman APIs externas. En este artículo te acompañaré paso a paso para que comprendas qué es realmente una petición por CORS, por qué ocurren problemas y, sobre todo, cómo solucionarlos de forma efectiva, con ejemplos prácticos basados en experiencia real.
¿Qué es una Petición por CORS y por qué es tan importante?
El término CORS significa Cross-Origin Resource Sharing o, en español, Compartición de Recursos entre Orígenes Cruzados. Para explicarlo sencillo: imagina que tu página web, alojada en https://miweb.com, quiere solicitar datos de un API ubicado en https://api.otrodominio.com. Por razones de seguridad, los navegadores no permiten, por defecto, que cualquier página web consuma recursos desde cualquier otro dominio, para evitar ataques como el Cross-Site Scripting (XSS).
Por eso, cuando tu página realiza una solicitud HTTP hacia otro dominio — esa es la petición por CORS — el navegador verifica que el servidor destino permita explícitamente esta operación mediante unos encabezados especiales en la respuesta HTTP.
Si el servidor no indica que acepta peticiones desde tu origen, el navegador bloquea la solicitud y te muestra un error típico. Por lo tanto, las peticiones por CORS son un mecanismo de seguridad esencial para proteger a los usuarios y sistemas.
Mini experiencia personal: El error CORS que casi detiene mi proyecto
Recuerdo perfectamente el día que implementé una SPA (Single Page Application) que consumía una API externa. Todo parecía configurado correctamente, pero al probar, el navegador devolvía el error:
Access to fetch at ‘https://api.externalsite.com/data’ from origin ‘https://misitio.com’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
Fue frustrante, y tuve que investigar profundamente. Al final, la solución pasaba por entender que debía coordinar con el equipo de backend de la API para que configuraran correctamente el encabezado que permite a mi dominio acceder a sus recursos.
Comprendiendo el Error CORS: ¿Por qué ocurre y qué significa?
El mensaje de error anterior indica que la respuesta del servidor no incluye el encabezado Access-Control-Allow-Origin. Este encabezado debe contener el dominio de tu aplicación o un comodín (*) que diga «está permitido para todos». Sin esto, el navegador lo interpreta como que la solicitud es insegura y la bloquea.
Este bloqueo ocurre antes de que tu código JavaScript pueda acceder a la respuesta, por lo que a pesar de que la API haya respondido, no podrás usar esos datos.
Cómo solucionar problemas con una Petición por CORS: Guía paso a paso
1. Configura el servidor para permitir solicitudes CORS
La mejor solución es configurar el servidor que brinda la API para que en sus respuestas HTTP incluya encabezados como:
Access-Control-Allow-Origin: https://misitio.com
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Headers: Content-Type, Authorization
Si tienes control sobre el backend, puedes añadir en el servidor esta configuración. Por ejemplo, en Node.js con Express:
app.use((req, res, next) => {
res.header(‘Access-Control-Allow-Origin’, ‘https://misitio.com’);
res.header(‘Access-Control-Allow-Methods’, ‘GET,POST,OPTIONS’);
res.header(‘Access-Control-Allow-Headers’, ‘Content-Type, Authorization’);
next();
});
Esto asegura que el navegador permita la comunicación entre ambos dominios.
2. Utiliza un servidor proxy cuando no controlas la API
Si el servidor externo no permite CORS y no puedes modificarlo, puedes crear un proxy intermedio que hará la petición desde tu backend (que no está sujeto a CORS) y luego devolverá la respuesta a tu frontend.
Por ejemplo, montar una ruta en tu servidor que haga fetch a la API externa y devuelva los datos.
3. Entiende las peticiones preflight (OPTIONS)
Algunas peticiones CORS complejas (con métodos POST, PUT, o con headers personalizados) requieren un «preflight», que es una solicitud HTTP OPTIONS previa para verificar permisos. Es fundamental que el servidor esté preparado para responder correctamente a estas OPTIONS y enviar los encabezados necesarios.
4. Ajusta las opciones del fetch o AJAX
En el código de cliente, asegúrate de emplear correctamente la configuración del fetch:
fetch(‘https://api.otrodominio.com/data’, {
method: ‘GET’,
mode: ‘cors’, // obligatoriamente para peticiones cross-origin
credentials: ‘include’ // si se manejan cookies o autenticación
});
Algunas librerías AJAX también requieren opciones específicas para manejar solicitudes cross-origin.
Avanzado: Seguridad y recomendaciones con CORS
Aunque usar Access-Control-Allow-Origin: * parece la solución más sencilla, tiene sus riesgos. Permitir a cualquier origen acceder puede exponer tu API a abusos o vulnerabilidades.
Mi recomendación es siempre restringir a los orígenes necesarios o manejar autenticación adicional para controlar el acceso.
Conclusión: La Petición por CORS, clave para consumir APIs seguro y efectivo
¿Quieres profundizar y dominar desarrollo web con APIs, seguridad, y mucho más? Te invito a explorar el Bootcamp Desarrollo Web, donde aprenderás de forma práctica y con profesionales reales todos los secretos de la web moderna.
En resumen, una petición por CORS es un paso obligatorio para mantener la seguridad en la web moderna cuando interactuamos con recursos entre dominios. Conocer cómo funciona y cómo manejar sus errores te evitará frustraciones y te ayudará a construir aplicaciones más robustas.
Si en mi trayectoria he aprendido que algo tengo claro: dominar el manejo de CORS es indispensable para cualquier desarrollador frontend o backend que trabaje con APIs externas.
Si deseas entender mejor los detalles técnicos, la documentación oficial de Mozilla sobre CORS es una fuente confiable y bien explicada: MDN Web Docs – COecto para hacerlo con el respaldo de KeepCoding.
