Flickr Błąd zwracania JSON w JavaScript w domenie krzyżowej

Question

Mam ten kod i próbuję zwrócić interfejs Flickr API, jednak pojawia się następujący błąd.

Zapytanie Cross-Origin Zablokowane: The Same Origin Policy uniemożliwia czytanie zdalnego zasobu w http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback={callback}&tags=london&tagmode=any&format=json. Można to naprawić, przenosząc zasób do tej samej domeny lub , co umożliwia CORS.

Jak włączyć to w moim kodzie?

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

Ponieważ używa JSONP, aby nie używać XMLHttpRequest do pobierania zasobu, należy wstrzyknąć script element z odpowiedniego adresu URL src i zdefiniować funkcję o takiej samej nazwie przypisanej do jsoncallback parametru który będzie nosił nazwę po załadowaniu skryptu:

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

// ... elsewhere in your code 

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

Wystarczy upewnić się, masz jsoncallback=handleTheResponse (lub cokolwiek nazwać metodę), upewnij się, że metoda ta jest dostępna na całym świecie, i powinno być dobrze iść.

Oto 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>

Answer 2

Istnieje wiele sposobów, aby go rozwiązać, łatwy jeden byłby jQuery;

zakładając zwrotna w

http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback= {callback} & tags = Londyn & tagmode = dowolnym formacie & = json

zwrotna = "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 

lub jeśli chcę tego bez jQuery, która jest taka sama jak co zalecił @ 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); 
}