JavaScript跨域时Flickr JSON返回错误
JavaScript跨域时Flickr JSON返回错误
提问于 2015-10-30 04:21:45
我有这段代码，我试图返回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回答 2
Stack Overflow用户
发布于 2015-11-01 10:37:35
由于使用的是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);<pre id="response">Loading...</pre>
Stack Overflow用户
发布于 2015-11-07 13:37:33
有多种方法可以解决这个问题，一个简单的方法就是使用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);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/33423853
复制相关文章
相似问题