Почему я вижу эту ошибку getJSON

Question

Я пытаюсь использовать rottentomatoes movie API с twitter's bootstrap typeahead plugin, но я получаю следующее сообщение об ошибке:

XMLHttpRequest cannot load http://api.rottentomatoes.com/api/public/v1.0/movies.json?apikey=MY_API_KEY&page_limit=5&q=t&format=jsonp. Origin http://localhost is not allowed by Access-Control-Allow-Origin. 

Мой код выглядит следующим образом:

var autocomplete = $('#searchinput').typeahead() 
    .on('keyup', function(ev){ 

     ev.stopPropagation(); 
     ev.preventDefault(); 

     //filter out up/down, tab, enter, and escape keys 
     if($.inArray(ev.keyCode,[40,38,9,13,27]) === -1){ 

      var self = $(this); 

      //set typeahead source to empty 
      self.data('typeahead').source = []; 

      //active used so we aren't triggering duplicate keyup events 
      if(!self.data('active') && self.val().length > 0){ 

       self.data('active', true); 

       $.getJSON("http://api.rottentomatoes.com/api/public/v1.0/movies.json?apikey=API_KEY_REMOVED&page_limit=5",{ 
        q: $(this).val() 
       }, function(data) { 


        //set this to true when your callback executes 
        self.data('active',true); 

        //Filter out your own parameters. Populate them into an array, since this is what typeahead's source requires 
        var arr = [], 
         i=data.movies.length; 
        while(i--){ 
         arr[i] = data.movies[i].title 
        } 

        //set your results into the typehead's source 
        self.data('typeahead').source = arr; 

        //trigger keyup on the typeahead to make it search 
        self.trigger('keyup'); 

        //All done, set to false to prepare for the next remote query. 
        self.data('active', false); 

       }); 

      } 
     } 
    }); 

Любая идея что вызывает эту ошибку?

Answer 1

В качестве вызовов относятся перекрестной безопасность браузер не может видеть ^CORS, либо вам придется создать прокси-сервер, у прокси называют крест домена и вернуть результаты, или если сервер в другом домене поддерживает, вы можете использовать jsonp

Answer 2

Похоже, вы используете неверный URL-адрес, который нарушает ту же политику происхождения.

Вы должны отправить запрос AJAX к тому же domain.
Это настоящий URL-адрес, который вы хотите, или просто скопировали его со своего сайта ?!

Same origin policy на wikipedia:

In computing, the same origin policy is an important security concept for a number of browser-side programming languages, such as JavaScript. The policy permits scripts running on pages originating from the same site to access each other's methods and properties with no specific restrictions, but prevents access to most methods and properties across pages on different sites.
...

Workarounds

Answer 3

Вы видят эту ошибку, поскольку запрос Ajax (в основном xhrXML) не разрешает междоменную связь. Если вы действительно хотите получить доступ к ресурсам из другого домена, вы можете использовать скрытый iframe для получения контента из другого домена. Это действительно просто и используется еще до того, как введена ajax.

Для получения дополнительной информации вы можете прочитать http://www.yaldex.com/ajax-tutorial-4/BBL0020.html (Пожалуйста, перейдите через IFrame раздел только)

Но я предупреждаю, что некоторые сайты не позволяют показывать там содержимое внутри фрейма например твиттер. Они имеют X-Frame-Option в своем заголовке, что предотвращает отображение их страниц внутри iframe. Итак, сначала проверьте заголовок вашего ресурса, который вы пытаетесь извлечь с помощью iframe.

Answer 4

Раствор для JSONP и кросс-доменных запросов с использованием typeahead 0.9.1

$('input.typeahead').typeahead [ 
    remote: { 
     url: 'http://remote-server.com/results.json?query=%QUERY&callback=?', 
     dataType: 'jsonp' 
    }, 
    minLength: 2 

Answer 5

Извините, но выше ответ возвращает 403 запрещенный с тухлыми помидорами апи,

, изменив его & обратного вызова =? а не? callback =? он возвращает объект JSON соответствующим образом на localhost