Si conoces la extensión de Chrome Allow-Control-Allow-Origin (CORS), en este post verás como JSONP puede ayudarte con este tema.

Es muy común llamar a un servicio externo desde una aplicación web para consultar o recopilar información de un tercero. Por ejemplo, incluir en tu app los últimos tweets de tu timeline. En estos casos, los navegadores bloquean la llamada a la API por encontrarse en otro dominio, distinto al que sirve la aplicación/página web. Es aquí donde Jsonp entra en juego para dar solución a este problema.

JSONP o JSON con padding es una técnica de comunicación utilizada en los programas JavaScript para realizar llamadas asíncronas a dominios diferentes.

Fuente: https://es.wikipedia.org/wiki/JSONP

Explicación Técnica

En definitiva es una forma de encapsular la respuesta JSON de una API en un <script/> de manera que los navegadores dejen de bloquear la petición AJAX a un dominio diferente al que sirve una aplicación Frontend.

Así, una request del tipo:

GET https://external-api.com/some-info

{"hello":"world"}

Se transforma en:

GET https://external-api.com/some-info?callback=process_request

process_request({"hello":"world"})

Es el servidor el que envuelve la respuesta, pasándosela como parametro a una función que nuestra app conoce y es capaz de procesar, haciéndole creer al navegador que se trata de un script, cuando realmente es información/contenido tipico de una llamada AJAX.

Limitaciones

Cómo usarlo

Basta con definir de forma global la función JS encargada de procesar la request e informarla como parámetro en la petición GET para que el server (que soporta Jsonp) responda de la forma adecuada y así, nuestra app “ejecute” la respuesta.

Los principales Frameworks Frontend, como Angular, ya incluyen esta solución para abstraernos de este procesamiento y poder hacer las peticiones como si de una llamada HTTP GET se tratase.

Os dejo un Plunk donde podéis verlo en funcionamiento. En esta ocasión estamos consultado la API de Itunes para buscar canciones con Angular como Framework de nuestra web app.

Fuente: https://www.udemy.com/angular-2-from-theory-to-practice/

Saludos y feliz verano (lo que queda de él).