Si has trabajado con una llamada AJAX (Axios, Fetch, etc...) entonces la siguiente imagen puede ser familiar para ti, este mensaje de error es mostrado por la consola del navegador:

El comportamiento que estas viendo es el efecto de los navegadores implementando CORS.

Antes de que CORS se estandarizara, no había forma de llamar a un endpoint de una API en un dominio diferente por razones de seguridad. Esto fue (y hasta cierto punto todavía lo está) bloqueado por la Política del Mismo Origen (Same-Origin Policy).

CORS es un mecanismo que tiene como objetivo permitir solicitudes realizadas en su nombre y, al mismo tiempo, bloquear algunas solicitudes realizadas por JS fraudulentas y se activa cada vez que realiza una solicitud HTTP para:

• Un dominio diferente (por ejemplo, el sitio en example.com llama a api.com[)](http://www.api.com%29/)
• Un dominio llama a un subdominio (por ejemplo, el sitio en example.com llama a api.example.com)
• Un puerto diferente (por ejemplo, el sitio en example.com llama a example.com:3001)/) llama a
• Un protocolo diferente (por ejemplo, el sitio en https://example.com llama a [http://example.com)](http://example.com%29/)

Este mecanismo previene a los atacantes a inyectar un script en varios sitios web (Ejemplo en la publicidad de Google Ads) para hacer una llamada AJAX hacía una página en la que tengas una sesión activa http://bbva.com y que este haga una petición para hacer una transferencia bancaria con tus credenciales.

Access-Control-Allow

CORS usa unas cuantas cabeceras HTTP tanto en la petición como en la respuesta pero las que debes de entender para poder continuar trabajando son:

Access-Control-Allow-Origin

Esta cabecera es regresada por el servidor e indica que dominios del cliente tienen acceso a acceder a los recursos del servidor. El valor de esta cabecera puede ser:

* -> permitir que cualquier dominio acceda a los recursos
<http://example.com> -> permitir que el dominio example.com sólo pueda acceder