Flickr JSON trả lại lỗi trong miền chéo JavaScript

Question

Tôi có mã này và tôi đang cố trả lại API Flickr, tuy nhiên tôi nhận được lỗi sau.

Cross-Origin Yêu cầu Bị chặn: The Origin Policy Same không cho phép đọc tài nguyên từ xa tại http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback={callback}&tags=london&tagmode=any&format=json. Điều này có thể được khắc phục bằng cách di chuyển tài nguyên đến cùng một miền hoặc bật CORS.

Làm cách nào để kích hoạt tính năng này trong mã của tôi?

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

Vì đây là sử dụng JSONP, bạn không sử dụng XMLHttpRequest để lấy tài nguyên, bạn tiêm một yếu tố script với URL src thích hợp, và xác định một hàm có cùng tên được gán cho jsoncallback tham số đó sẽ được gọi là một khi kịch bản đã nạp:

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

// ... elsewhere in your code 

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

Chỉ cần chắc chắn rằng bạn có jsoncallback=handleTheResponse (hoặc bất cứ điều gì bạn gọi phương thức của bạn), đảm bảo phương pháp này có thể truy cập trên toàn cầu, và bạn sẽ được tốt để đi.

Dưới đây là một bản 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

Có nhiều cách để giải quyết nó, một dễ dàng sẽ sử dụng jQuery;

giả callback trong

http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback= {callback} & tags = london & tagmode = bất kỳ định dạng & = 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 

hoặc nếu bạn muốn điều này mà không cần jQuery, giống như những gì @ daniel-flint được đề nghị.

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