Доступ к Panoramio API с использованием AJAX - ошибка "Происхождение hxxp://foo.bar не разрешено Access-Control-Allow-Origin".

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. Access-Control-Allow-Origin не разрешает панель. 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()
 ...
}

URL Panoramio работает, если набран прямо в браузере.

Пожалуйста, не могли бы вы помочь мне с этим, у меня заканчиваются надежды...:(

Заранее спасибо,

Твой Марко

Answer 1

То, что вы поражаете, - это та же политика происхождения, которая предотвращает междоменные запросы через XMLHttpRequest. Существует обходной путь, если поддержка сайта (и тот, который вы пытаетесь получить доступ, сделал!), JSONP. Это означает, что все, что вам нужно, это <script> пометить с этим callback параметр заполняется так:

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

Вы можете проверить работающий пример здесь.