我正在开发一个页面,该页面通过jQuery的AJAX支持从Flickr和Panoramio中提取图像。
Flickr方面运行良好,但是当我尝试$.get(url, callback)从Panoramio运行时,我在Chrome的控制台中看到错误:
$.get(url, callback)
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不允许使用Origin null。
如果我直接从浏览器查询该URL,它将正常工作。这是怎么回事,我可以解决这个问题吗?我是在错误地编写查询,还是Panoramio这样做妨碍了我的工作?
编辑
这是一些显示问题的示例代码:
$().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... }); });
据记录,据我所知,您有两个问题:
您没有向您传递“ jsonp”类型说明符$.get,因此它使用的是普通的XMLHttpRequest。但是,您的浏览器支持CORS(跨域资源共享),如果服务器确定,则允许跨域XMLHttpRequest。那是Access-Control-Allow-Origin头文件进入的地方。
$.get
Access-Control-Allow-Origin
我相信您提到您是通过file:// URL运行它的。CORS标头有两种方式来表示跨域XHR正常。一种是发送Access-Control-Allow-Origin: *(如果您通过到达Flickr $.get,他们一定在发送),另一种是回显Origin标头的内容。但是,file://URL产生的null Origin不能通过回显进行授权。
Access-Control-Allow-Origin: *
Origin
file://
达林的使用建议以一种round回的方式解决了第一个问题$.getJSON。如果看到callback=?URL中的子字符串,将请求类型从其默认值“ json”更改为“ jsonp”确实有点魔术。
$.getJSON
callback=?
通过不再尝试从file://URL 执行CORS请求,解决了第二个问题。
为了向其他人说明,以下是简单的故障排除说明:
dataType
jsonp
http://