Flickr JSON 在 JavaScript 跨域中返回错误答案

【问题标题】：Flickr JSON returning error in JavaScript cross domainFlickr JSON 在 JavaScript 跨域中返回错误
【发布时间】：2016-01-30 03:54:18
【问题描述】：

我有这段代码，我正在尝试返回 Flickr API，但是我收到以下错误。

跨域请求被阻止：同源策略不允许读取远程资源在 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

【问题讨论】：

5 年前我有同样的问题，答案是使用 JSONP api.jquery.com/jquery.getjson 和 jquery。 stackoverflow.com/questions/3112399/…

标签： javascript json flickr

【解决方案1】：

由于这是使用JSONP，因此您不使用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（或任何您调用的方法），确保该方法可全局访问，您就可以开始了。

这是一个演示：

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

&lt;pre id="response"&gt;Loading...&lt;/pre&gt;

【讨论】：

【解决方案2】：

有多种解决方法，一种简单的方法是使用 jQuery；

假设回调

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

或者如果你想要这个没有 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);  
}

【讨论】：