Soluciones para permitir solicitudes de Cross-Origin Resource Sharing (CORS) en APIs externas

Si trabajas con APIs externas, es posible que te hayas enfrentado al error de CORS. Este problema puede ser resuelto con varias soluciones que te presentaremos en este artículo. Desde una extensión de Chrome hasta la modificación del servidor local o hosting, te explicaremos las diferentes opciones que puedes utilizar en tu desarrollo para permitir solicitudes de CORS. Además, te proporcionaremos un enlace útil para comprender el funcionamiento de CORS.

¿Has tenido problemas al trabajar con APIs externas y te has enfrentado al error de CORS? En este artículo, te presentamos posibles soluciones para permitir solicitudes de Cross-Origin Resource Sharing (CORS).

Moesif Origin & CORS Changer

Comenzamos con una extensión de Google Chrome desarrollada por la empresa X. Con un solo clic, Moesif Origin & CORS Changer hace compatible el consumo de APIs externas para pruebas en local. Sin embargo, se recomienda utilizar esta extensión solo en ambientes de desarrollo y no para producción, ya que solo modifica la compatibilidad con el navegador donde se instaló la extensión y altera el funcionamiento de la navegación. Por lo tanto, se recomienda desactivar la extensión luego de realizar las pruebas.

Modificar el servidor local o hosting

Ya sea un servidor PHP o Node.Js, se puede habilitar el CORS a través de la configuración para que el consumo de las APIs se pueda realizar sin depender de extensiones externas.

Enlaces para habilitar el CORS

Otra solución es insertar un enlace delante del JSON o página que se vaya a consumir. El enlace que por experiencia personal resulta útil es https://cors-anywhere.herokuapp.com/. Solo debes seguir las instrucciones indicadas en el enlace y podrás realizar tus desarrollos.

Solución con proxy inverso

Otra solución que se puede implementar para solucionar el problema del CORS es el uso de un proxy inverso. Este consiste en tener un servidor intermedio que reciba las solicitudes del cliente y las reenvíe al servidor de destino. De esta forma, se pueden modificar las cabeceras HTTP y agregar el encabezado Access-Control-Allow-Origin que es requerido por el navegador para permitir el acceso a los recursos externos.

Existen varias herramientas y servicios que proporcionan un proxy inverso como solución para el CORS, como por ejemplo, Nginx, Apache o AWS API Gateway.

Conclusión

El problema del CORS es una situación común en el desarrollo de aplicaciones web y puede resultar frustrante cuando se quiere consumir una API externa. Sin embargo, existen diversas soluciones que se pueden implementar para solucionar este problema, como el uso de extensiones para el navegador, la modificación de la configuración del servidor local o hosting, el uso de enlaces de habilitación CORS o la implementación de un proxy inverso.

Es importante comprender que cada solución tiene sus ventajas y desventajas y que se debe elegir la que mejor se adapte a las necesidades de cada proyecto. Conociendo las diferentes alternativas, será más fácil tomar la decisión correcta para permitir las solicitudes de Cross-Origin Resource Sharing y asegurarse de que las aplicaciones web funcionen correctamente.