我正在开发一个页面,通过jQuery的AJAX支持从Flickr和Panoramio提取图像。
Flickr端工作正常,但当我尝试$。get(url,回调)从全景,我看到一个错误在Chrome的控制台:
XMLHttpRequest无法加载http://www.panoramio.com/wapi/data/get_photos?v=1&key=dummykey&tag=test&offset=0&length=20&callback=processImages&minx=-30&miny=0&maxx=0&maxy=150。Access-Control-Allow-Origin不允许原点为空。
如果我直接从浏览器中查询该URL,它可以正常工作。这是怎么回事,我能回避吗?我是否错误地编写了我的查询,或者这是Panoramio所做的阻碍我试图做的事情?
谷歌在错误消息中没有找到任何有用的匹配。
EDIT
下面是一些显示问题的示例代码:
$().ready(function () {
var url = 'http://www.panoramio.com/wapi/data/get_photos?v=1&key=dummykey&tag=test&offset=0&length=20&callback=processImages&minx=-30&miny=0&maxx=0&maxy=150';
$.get(url, function (jsonp) {
var processImages = function (data) {
alert('ok');
};
eval(jsonp);
});
});
您可以在线运行示例。
编辑2
谢谢达林的帮助。上面的代码是错误的。用这个代替:
$().ready(function () {
var url = 'http://www.panoramio.com/wapi/data/get_photos?v=1&key=dummykey&tag=test&offset=0&length=20&minx=-30&miny=0&maxx=0&maxy=150&callback=?';
$.get(url, function (data) {
// can use 'data' in here...
});
});
郑重声明,据我所知,你有两个问题
You weren't passing a "jsonp" type specifier to your $.get, so it was using an ordinary XMLHttpRequest. However, your browser supported CORS (Cross-Origin Resource Sharing) to allow cross-domain XMLHttpRequest if the server OKed it. That's where the Access-Control-Allow-Origin header came in.
I believe you mentioned you were running it from a file:// URL. There are two ways for CORS headers to signal that a cross-domain XHR is OK. One is to send Access-Control-Allow-Origin: * (which, if you were reaching Flickr via $.get, they must have been doing) while the other was to echo back the contents of the Origin header. However, file:// URLs produce a null Origin which can't be authorized via echo-back.
第一个问题通过Darin建议使用$. getjson迂回解决。它做了一个小魔术,改变请求类型从默认的“json”到“jsonp”,如果它看到子字符串callback=?在URL中。
这解决了第二个问题,不再尝试从文件:// URL执行CORS请求。
为了让其他人更清楚,这里有一些简单的故障排除说明:
如果您尝试使用JSONP,请确保以下情况之一:
你正在使用$。get和设置dataType为jsonp。
你正在使用$。getJSON和包含callback=?在URL中。
如果您试图通过CORS进行跨域XMLHttpRequest…
请确保通过http://.进行测试通过file://运行的脚本对CORS的支持有限。
确保浏览器实际支持CORS。(Opera和ie浏览器姗姗来迟)
郑重声明,据我所知,你有两个问题
You weren't passing a "jsonp" type specifier to your $.get, so it was using an ordinary XMLHttpRequest. However, your browser supported CORS (Cross-Origin Resource Sharing) to allow cross-domain XMLHttpRequest if the server OKed it. That's where the Access-Control-Allow-Origin header came in.
I believe you mentioned you were running it from a file:// URL. There are two ways for CORS headers to signal that a cross-domain XHR is OK. One is to send Access-Control-Allow-Origin: * (which, if you were reaching Flickr via $.get, they must have been doing) while the other was to echo back the contents of the Origin header. However, file:// URLs produce a null Origin which can't be authorized via echo-back.
第一个问题通过Darin建议使用$. getjson迂回解决。它做了一个小魔术,改变请求类型从默认的“json”到“jsonp”,如果它看到子字符串callback=?在URL中。
这解决了第二个问题,不再尝试从文件:// URL执行CORS请求。
为了让其他人更清楚,这里有一些简单的故障排除说明:
如果您尝试使用JSONP,请确保以下情况之一:
你正在使用$。get和设置dataType为jsonp。
你正在使用$。getJSON和包含callback=?在URL中。
如果您试图通过CORS进行跨域XMLHttpRequest…
请确保通过http://.进行测试通过file://运行的脚本对CORS的支持有限。
确保浏览器实际支持CORS。(Opera和ie浏览器姗姗来迟)