php - Panoramio API access using AJAX - error "Origin hxxp://foo.bar is not allowed by Access-Control-Allow-Origin."

Question

I am currently experiencing this issue, and am wondering why...?

The error message is:

"XMLHttpRequest cannot load 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=?. Origin hxxp://foo.bar is not allowed by Access-Control-Allow-Origin. test_panoramio.html:59Uncaught SyntaxError: Unexpected token )"

"hxxp://foo.bar" refers to the site I am running the script from.

The "test_panoramio.html" on the site contains e.g. the following :

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()
 ...
}

The Panoramio URL works if typed directly to the browser.

Please could you help me with this, I am running out of hope...:(

Thank you in advance,

Yours Marko

Nick Craver Nick Craver · Accepted Answer · 2010-12-27T12:48:42

What you're hitting is the same origin policy which prevents cross-domain requests via XMLHttpRequest. There is a work-around if the site support is (and the one you're trying to access doed!), JSONP. This means all you need is a <script> tag with that callback parameter populated, like this:

<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>

And a function with the same name:

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

You can test out a working example here.

php - Panoramio API access using AJAX - error "Origin hxxp://foo.bar is not allowed by Access-Control-Allow-Origin."

1 Answers