¿Que es CORS?
CORS es un mecanismo que permite solicitar recursos de una página web desde un dominio (servidor) diferente del que sirve el primer recurso que se ha servido.
En otras palabras, CORS se produce cuando tenemos nuestro cliente (A), consumimos una API a un servidor (B), pero el servidor (B) consume otro servicio a un servidor (C) produciendo un intercambio de recursos de origen cruzado (CORS).
¿Por que obtengo este error en el navegador pero no en POSTMAN o el lenguaje backend?
Esta limitante solo existe en los navegadores web por seguridad, postman y su lenguaje backend consumen el servicio web directamente, por lo cual no están sujetos a esta limitante.
¿Como soluciono el problema?
Algunas opciones disponibles:
1) Si usted tiene acceso al servidor backend que responde a la API debe agregar el header Access-Control-Allow-Origin
para proporcionar la respuesta.
Puede leer más sobre este header aquí
2) Si usted no tiene acceso al servidor de la API existe un feo "hack" llamado JSONP
(JSON con padding). Esto consiste en definir el tipo de dato enviado como JSONP
.
La magia que hay por detrás es agregar el end point de la API dentro del atributo src
de una etiqueta script
, posteriormente este es agregando al DOM, obteniendo el contenido y luego removiendo la etiqueta.
Esto es posible ya que las etiquetas script
no están limitadas a CORS, pero debe tener en cuenta que su petición siempre será GET
, no podrá enviar headers
personalizados y la respuesta del servidor siempre estará sujeta al formato de respuesta de JSONP
.
3) En caso que no tenga acceso al servidor lo más recomendado es crear su propia API para consumir la API que desea, agregando así el Access-Control-Allow-Origin
.
Si tiene flojera de crear una simple API solo para consumir otra API puede buscar algún proyecto open source en GITHUB, hay varios desarrollados, usted no es el primer sujeto con este problema.