Se te ha olvidado mencionar que estas usando un framework, creo que Angular
, aunque perfectamente puede ser Laravel
...
Tienes tres problemas, el primero reside en algo llamado CORS, en ingles significa Cross Origin Resource Sharing (intercambio de recursos de origen cruzado), las cuales sabotean la respuesta que intentas obtener desde esa URL
(la API
).
En especifico la cabecera mas importante es:
Access-Control-Allow-Origin
La cual es la que se encarga de dejar o no que alguien pueda acceder al recurso (si tiene el acceso o si se le concede el acceso), de lo contrario, las CORS están presentes de manera por defecto para proteger el acceso remoto a recursos de manera no autorizada.
con esto se hace evidente decir que si no tienes acceso a la API
o si no estas autorizado para usar el recurso simplemente, hagas lo que hagas no vas a poder acceder a ese recurso ni mediante AJAX
, ni mediante una peticion POST
, ni mediante una peticion GET
ni tampoco mediante http
o fetch
, ya que las CORS
evitaran que pueda llegarte tal información al sitio.
La única forma de desactivar las CORS
es que tu tengas acceso a los archivos del sitio y que al inicio del archivo que se encargue de traerte los recursos establezcas la cabecera:
"Access-Control-Allow-Origin: ipPublica"
O que establezcas la API
como de acceso publico (mucho mas inseguro):
"Access-Control-Allow-Origin: *"
Sin embargo como te habrás dado cuenta, si la API
no es tuya o no tienes acceso al archivo de la API
no podrás modificar las cabeceras, y además el problema no es del lado del cliente, si no del lado del servidor (API
), por lo cual simplemente:
No podras usar esa API en tu sitio.
Hay una manera de poder usar la API
, pero eso depende de si la API
acepta algo llamado API KEY
, donde la API KEY
la provee el mismo sitio de la API
que deseas usar, normalmente si es una API
comercial deberás pagar por una API KEY
, la cual podrás añadir a la URL
de manera especifica para poder acceder al recurso mediante una peticion GET
.
Pero a no ser de que la API
acepte una API KEY
o algo parecido para darte acceso a ese recurso no hay ninguna otra forma en la que puedes acceder al recurso de la API KEY
.
Mi recomendación en ese caso:
Buscar APIS publicas o pagar por una API KEY.
una vez sabiendo que probablemente no tengas acceso de ningún modo a los datos de esa API
en tu sitio, pasamos al segundo problema, que es en el caso hipotetico en el que la API
si te esta devolviendo correctamente y sin problemas la data.
En ese caso, fui directamente al link a ver la API
y me di cuenta que no tiene una cabecera Content-Type
seteada como JSON
respuesta por lo cual el contenido que vas a obtener siempre de manera directa a la hora de hacer GET
es un string
y NO un JSON, por lo cual asumiendo que esto sirva, deberas luego parsear la data traida a un JSON
, a fin de usarla:
//Te falta declararla, considera siempre declarar las variables antes de usarlas
const blog = {};
blog.posts = {};
$http.get('https://cdws.us-east-1.amazonaws.com/drive/v2/photosGroups/shares/70i9aUm7TkGl9Ve4ShsJ_A.TZB9lroalwKfD1no707NBM').success(function(data){
//Usamos JSON.parse para pasar de un string a un JSON
blog.posts = JSON.parse(data);
});
Si bien esto podria llegar a funcionar, el tercer problema es:
Olvidar que las operaciones con servidores son consideradas asincronas y pueden tardar un tiempo en ser resueltas.
Esto repercute en el hecho de que si intentas usar luego tu variable blog.posts
despues de haber realizado tu peticion, el resultado sera undefined
fuera de la peticion, pero dentro de la peticion (dentro del success
), tendra el valor deseado.
Esto pasa por que estamos acostumbrados a que todo lo que hemos visto hasta el momento sea sincrono
, pero en este caso, las peticiones http
, son asincronas, el programa o su flujo NO se vera afectado por el hecho de que haya una peticion asincrona, el flujo por defecto de javascript
es sincrono por lo que las llamadas sincronas
son ejecutadas en orden.
Al ser javascript
un lenguaje de programacion de naturaleza sincrono
y ademas el hecho de que este es monohilo hace que las peticiones asincronas sean ejecutadas tambien en el mismo orden, pero no necesariamente que terminen en el mismo orden que fueron ejecutadas.
por lo que lo que ocurre es que javascript
al toparse con algo que sea asincrono NO va a esperar a que las peticiones
o funciones asincronas
devuelvan una respuesta o un error, lo que va a hacer javascript
es ejecutar ese metodo
o funcion asincrona
y seguira ejecutando el resto del codigo sin esperar ninguna de las peticiones asincronas, mientras tanto estas estaran a la espera de la obtencion de una respuesta
o un error
.
por lo que, digamos que el instante en el que intentes recuperar directamente el valor obtenido en la petición NO estará nunca sincronizado con el tiempo en el que intentas obtener dicho valor.
Por este motivo te recomiendo leer sobre 3 conceptos para poder que no te confundas al hacer peticiones de este tipo:
- Funciones asincronas
- async
- await
- Promise
Leyendo esos conceptos o investigandolos sabras como resolver ese problema o usarlo a tu favor.
data
. Perodata
contiene muchas propiedades además de la URL. Si solo quieres acceder a la URL tendras que ir accediendo a cada propiedad hasta que llegues a la que buscas. Por ejemplo sería algo así:data.coverPhoto.url
. Es más fácil si te llevas el JSON a un formateador de código donde puedas ver la estructura tales como: jsonformatter.curiousconcept.com