XmlHttpRequest错误：Access-Control-Allow-Origin不允许使用

Question

XmlHttpRequest错误：Access-Control-Allow-Origin不允许使用我正在开发一个页面，通过jQuery的AJAX支持从Flickr和Panoramio中提取图像。Flickr端工作正常，但当我尝试$.get(url, callback)从Panoramio时，我在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不允许使用null。如果我直接从浏览器查询该URL，它可以正常工作。发生了什么，我可以解决这个问题吗？我是不是错误地编写了我的查询，或者这是因为Panoramio会妨碍我正在尝试做的事情？Google没有在错误消息上显示任何有用的匹配项。编辑以下是一些显示问题的示例代码：$().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感谢Darin对此的帮助。 上面的代码错了。 请改用：$().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...   });});

Answer 1

据记载，据我所知，你有两个问题：

1. 您没有将“jsonp”类型说明符传递给您$.get，因此它使用的是普通的XMLHttpRequest。但是，如果服务器对其进行了确认，则您的浏览器支持CORS（跨源资源共享）以允许跨域XMLHttpRequest。这就是Access-Control-Allow-Origin标头进来的地方。

2. 我相信你提到你是从file：// URL运行的。CORS头有两种方式表示跨域XHR是正常的。一个是发送Access-Control-Allow-Origin: *（如果你通过Flickr $.get，它们必须一直在做），而另一个是回显Origin标题的内容。但是，file://URL产生的null Origin不能通过echo-back授权。

第一个问题是达林建议使用的迂回解决方案$.getJSON。如果它看到callback=?URL中的子字符串，将请求类型从其默认的“json”更改为“jsonp”会有点神奇。

通过不再尝试从file://URL 执行CORS请求，解决了第二个问题。

为了向其他人澄清，以下是简单的故障排除说明：

1. 如果您尝试使用JSONP，请确保满足以下条件之一：

• 你正在使用$.get并设置dataType为jsonp。

• 您正在使用$.getJSON并包含callback=?在URL中。

2. 如果您正在尝试通过CORS进行跨域XMLHttpRequest ...

1. 确保你正在通过测试http://。运行的脚本file://对CORS的支持有限。

2. 确保浏览器实际支持CORS。（Opera和Internet Explorer迟到了）

Answer 2

对于一个简单的HTML项目：

cd project
python -m SimpleHTTPServer 8000

然后浏览您的文件。