Flickr JSON devolviendo error en JavaScript de dominio cruzado

Question

Tengo este código y estoy intentando devolver la API de Flickr, sin embargo, obtengo el siguiente error.

Solicitud de origen cruzado bloqueada: la misma política de origen no permite leer el recurso remoto en http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback={callback}&tags=london&tagmode=any&format=json . Esto se puede solucionar moviendo el recurso al mismo dominio o habilitando CORS.

¿Cómo habilito esto en mi código?

enter
MyFeed.prototype.getFeed = function(data) {
console.log(f.feedUrl);
var request = new XMLHttpRequest();
request.open(''GET'', f.feedUrl, true);
request.onload = function () {
if (request.status >= 200 && request.status < 400) {
// Success!
console.log(request.responseText);
var data = JSON.parse(request.responseText);
} else {
// We reached our target server, but it returned an error
console.log("error");
}
};
request.onerror = function () {
// There was a connection error of some sort
};
request.send();
}here

Answer 1

Debido a que está utilizando JSONP , no usa XMLHttpRequest para recuperar el recurso, inyecta un elemento de script con la URL src adecuada, y define una función con el mismo nombre asignado al parámetro jsoncallback que se llamará una vez que se haya cargado el script:

function handleTheResponse(jsonData) {
console.log(jsonData);
}
// ... elsewhere in your code
var script = document.createElement("script");
script.src = f.feedUrl;
document.head.appendChild(script);

Solo asegúrate de tener jsoncallback=handleTheResponse (o de lo que llames tu método), asegúrate de que el método sea accesible a nivel mundial y deberías estar listo.

Aquí hay una demostración:

function handleTheResponse(data) {
document.getElementById("response").textContent = JSON.stringify(data,null,2);
}
var script = document.createElement("script");
script.src = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=handleTheResponse&tags=london&tagmode=any&format=json"
document.head.appendChild(script);

<pre id="response">Loading...</pre>

Answer 2

Hay varias formas de resolverlo, una fácil sería usar jQuery;

asumiendo devolución de llamada en

http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback= {callback} & tags = london & tagmode = any & format = json

callback = "jQuery111203062643037081828_1446872573181"

enter
MyFeed.prototype.getFeed = function(data) {
$.ajax({
url: f.feedUrl,
dataType : "jsonp",
success: function(response) {
console.log(response);
},
error: function (e) {
console.log(e);
}
});
}here

o si quieres esto sin jQuery, que es lo mismo que recomienda @ daniel-flint.

function jsonp(url, callback) {
var callbackName = ''jsonp_callback_'' + Math.round(100000 * Math.random());
window[callbackName] = function(data) {
delete window[callbackName];
document.body.removeChild(script);
callback(data);
};
var script = document.createElement(''script'');
script.src = url + (url.indexOf(''?'') >= 0 ? ''&'' : ''?'') + ''callback='' + callbackName;
document.body.appendChild(script);
}
jsonp(''http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=callback&tags=london&tagmode=any&format=json'', callback);
function callback(data){
console.log(data);
}