javascript - Flickr JSON 在 JavaScript 跨域中返回错误

Question

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

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback={callback}&tags=london&tagmode=any&format=json. This can be fixed by moving the resource to the same domain or enabling 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 来检索资源，而是注入(inject)一个具有适当 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);

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