Ошибка Flickr JSON в перекрестном домене JavaScript

Question

У меня есть этот код, и я пытаюсь вернуть Flickr API, однако я получаю следующую ошибку.

Cross-Origin Request Заблокировано: The Same Origin Policy запрещает чтение удаленный ресурс в http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback={callback}&tags=london&tagmode=any&format=json. Это можно устранить, перемещая ресурс в тот же домен или , что позволяет CORS.

Как включить это в свой код?

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

Поскольку это использует JSONP, вы не используете XMLHttpRequest получить ресурс, вы впрыснуть script элемент с соответствующим Src URL, и определить функцию с тем же именем, назначенного jsoncallback параметра, который будет называться После загрузки сценария:

function handleTheResponse(jsonData) { 
    console.log(jsonData); 
} 

// ... elsewhere in your code 

var script = document.createElement("script"); 
script.src = f.feedUrl; 
document.head.appendChild(script); 

Просто убедитесь, что у вас есть jsoncallback=handleTheResponse (или любой другой вызове метода), убедитесь, что метод доступен во всем мире, и вы должны быть хорошо идти.

Вот демо:

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

Есть несколько способов решить это, простой один будет с помощью JQuery;

при условии обратного вызова в

http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback= {обратный вызов} & теги = лондон & tagmode = любой формат & = JSON

обратного вызова = "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 

или если вы захотите это без jQuery, который аналогичен что @ daniel-кремн рекомендуется.

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); 
}