2014-10-08 2 views
2

Я новичок в вызовах AJAX, и я хотел бы высмеять страницу поиска rottentomatoes. Я получаю правильный файл JSON, но он не будет загружаться в моем браузере. Я занимаюсь исследованиями и не нашел решения. Любая помощь будет оценена по достоинству.Ошибка: заголовок «Access-Control-Allow-Origin» отсутствует на запрошенном ресурсе. Origin 'http: // localhost: 8000', следовательно, не разрешен доступ

Вот мой код.

$(document).ready(function() { 
    var apikey = "qvq7jf4n29fv8m8pxqqyxsxg"; 
    var baseUrl = "http://api.rottentomatoes.com/api/public/v1.0"; 
    var moviesSearchUrl = baseUrl + '/movies.json?apikey=' + apikey; 

$('form').submit(function (evt) { 
    var $submitButton = $('#submit'); 
    var $searchField = $('#search'); 
    evt.preventDefault(); 
    $searchField.prop("disabled",true); 
    $submitButton.attr("disabled", true).val("searching...."); 
    var query = $searchField.val(); 
    var rotten = moviesSearchUrl + '&q=' + encodeURI(query); 

    $.ajax(rotten, 

    function(data){ 

     if (data.items.length > 0) { 
     $.each(data.items,function(i,movie) { 
      movieHTML += '<li class="grid-25 tablet-grid-50">'; 
      movieHTML += '<a href="' + movie.title + '" class="image">'; 
      movieHTML += '<img src="' + movie.posters.original + '"></a></li>'; 
     }); // end each 
     } else { 
     movieHTML = "<p>No photos found that match: " + animal + ".</p>" 
     } 
     $('#movies').html(movieHTML); 
     $searchField.prop("disabled", false); 
     $submitButton.attr("disabled", false).val("Search"); 
    }); // end getJSON 

    }); // end click 

}); // end ready 
+1

Вы работаете в политику одного источника. См. Http://stackoverflow.com/questions/3076414/ways-to-circumvent-the-same-origin-policy. – sushain97

ответ

3

Вам просто нужно было настроить aajax для использования jsonp.

Здесь работает jsfiddle http://jsfiddle.net/hvtz7kfv/2/

$.ajax({ 
    dataType: "jsonp", 
    url: rotten, 
    success: searchCallback 

}); 
+0

Я верю, используя jsonp, вы можете получить только сообщение, а не сообщение ... Итак, для этого сценария это должно быть хорошо, но jsonp не является ответом на то, чтобы полностью обойти эту же политику происхождения ... –

0

Вместо отправку AJAX запроса непосредственно гнилые помидоры, послать запрос на сервер, ваш сервер отправить запрос на гнилые помидоры, а затем передать этот ответ на ваш клиент. Я не думаю, что вам следует делать это с помощью публичного API.

Вы используете Chrome? Я думаю, что у Chrome есть некоторые странные ограничения, связанные с CORS и localhost.