使用AJAX访问Panoramio API - error“access -Control-Allow-Origin不允许原始hxxp://foo.bar。”

Question

我目前遇到了这个问题，我想知道为什么...？

错误消息为：

"XMLHttpRequest无法加载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=？访问控制-允许-原始地址不允许使用原始地址hxxp://foo.bar。test_panoramio.html:59Uncaught SyntaxError:意外令牌)“

"hxxp://foo.bar“指的是我运行脚本的站点。

网站上的"test_panoramio.html“包含以下内容：

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=?";

function myScriptFn()
 {
  if (window.XMLHttpRequest) {
   myAjax = new XMLHttpRequest();
  if ( typeof myAjax.overrideMimeType != 'undefined') {
  myAjax.overrideMimeType('text/xml');
 }
} else if (window.ActiveXObject) {
myAjax = new ActiveXObject("Microsoft.XMLHTTP");
} else {
  alert('The browser does not support the AJAX XMLHttpRequest!!!');
}

myAjax.onreadystatechange = function() 
{
       handleResponse();
} 

myAjax.open('GET', url, true);
myAjax.send(null);

}

function handleResponse()
{
if (myAjax.readyState == 4){    // Response is COMPLETE
    if ((myAjax.status == 200) || (myAjax.status = 304))
    {
            // do something with the responseText or responseXML
             processResults();

     }else{
     alert("[handleResponse]: An error has occurred.");
     }
     }
}

function processResults()
{

 myObj = eval( '(' + myAjax.responseText + ')' );
 ...
 doSomething()
 ...
}

如果直接在浏览器中键入，Panoramio URL即可正常工作。

你能帮我一下吗，我已经没有希望了……

先谢谢你，

你的马可

Answer 1

你遇到的是the same origin policy，它阻止了通过XMLHttpRequest的跨域请求。如果站点支持是(也是您试图访问的那个！) JSONP，则有一个变通方法。这意味着您只需要一个填充了callback参数的<script>标记，如下所示：

<script type="text/javascript" src="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=myFunction"></script>

和一个同名的函数：

function myFunction(data) {
  //data is what came back, it's a javascript object
}

You can test out a working example here。