Flickr JSON返回JavaScript跨域错误

I have this code and I'm trying to return Flickr API, however I get the following error.

我有这段代码，我试图返回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.

跨源请求被阻止:相同的源策略不允许在http://api.flickr.com/services/feeds/photos_public.gne?这可以通过将资源移动到相同的域或启用CORS来修复。

How do I enable this in my code?

如何在代码中启用它?

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

2 个解决方案

#1

Since this is using JSONP, you don't use XMLHttpRequest to retrieve the resource, you inject a script element with appropriate src URL, and define a function with the same name assigned to jsoncallback parameter which will be called once the script has loaded:

由于这是使用JSONP，所以您不使用XMLHttpRequest来检索资源，您可以使用适当的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);

Just make sure you have jsoncallback=handleTheResponse (or whatever you call your method), ensure the method is globally accessible, and you should be good to go.

只要确保您有jsoncallback=handleTheResponse(或任何您调用您的方法的东西)，确保方法是全局可访问的，您应该去做。

Here's a demo:

这里有一个演示:

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>

#2

There are multiple ways to resolve it, a easy one would be using jQuery;

有多种方法可以解决它，一个简单的方法是使用jQuery;

assuming callback in

如果回调的

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

http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback= {调}标签= london&tagmode =任何格式= json

callback="jQuery111203062643037081828_1446872573181"

回调= " 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

or if you want this without jQuery, which is same as what @daniel-flint recommended.

或者，如果您想要在没有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);  
}

#1

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

// ... elsewhere in your code

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