JavaScript跨域返回Flickr JSON错误

我有这段代码，我试图返回FlickrAPI，但是我得到了以下错误

已阻止跨源请求：同一源策略不允许读取 位于的远程资源

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

enter
MyFeed.prototype.getFeed=函数（数据）{
console.log（f.feedUrl）；
var request=new XMLHttpRequest（）；
open（'GET'，f.feedUrl，true）；
request.onload=函数（）{
如果（request.status>=200&&request.status<400）{
//成功！
console.log（request.responseText）；
var data=JSON.parse（request.responseText）；
}否则{
//我们到达了目标服务器，但它返回了一个错误
控制台日志（“错误”）；
}
};
request.onerror=函数（）{
//出现了某种连接错误
};
request.send（）；
}这里

因为这是在使用，所以您不需要使用

XMLHttpRequest

来检索资源，而是使用适当的src URL注入

script

元素，并定义一个与

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

（或您称之为方法的任何内容），确保该方法是全局可访问的，您就可以开始了

下面是一个演示：

功能手柄响应（数据）{
document.getElementById（“response”）.textContent=JSON.stringify（数据，null，2）；
}
var script=document.createElement（“脚本”）；
script.src=”http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=handleTheResponse&tags=london&tagmode=any&format=json"
document.head.appendChild（脚本）
加载…
有多种解决方法，一种简单的方法是使用jQuery

假设在

{callback}&tags=london&tagmode=any&format=json

callback=“jquery11203062643037081828\u 1446872573181”

或者，如果您不想使用jQuery，这与@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);  
}

5年前我也有同样的问题，答案是将JSONP与jquery结合使用。
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);  
}