2012-03-31 12 views
3

Ich versuche, die rottentomatoes movie API mit twitter's bootstrap typeahead plugin zu verwenden, aber ich erhalte die folgende Fehlermeldung erhalten:Warum sehe ich diesen getJSON Fehler

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. 

Mein Code sieht wie folgt aus:

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

       }); 

      } 
     } 
    }); 

Jede Idee Was verursacht diesen Fehler?

+0

Wahrscheinlich relevant: https://developer.mozilla.org/en/http_access_control – Corbin

Antwort

4

Als Sicherheitsproblem Cross-Browser-Anrufe sind nicht erlaubt zu sehen CORS, entweder Sie einen Proxy erstellen haben, haben Sie Ihre Proxy nennen das Kreuz Domain und geben Sie die Ergebnisse zurück, oder wenn der Server auf der anderen Domain unterstützt, können Sie jsonp

+0

Sieht aus wie sie jsonp unterstützen. Kann ich dieses Format einfach zu meiner getJSON-Abfrage hinzufügen? – Paul

+1

@Paul versuchen, '? Callback =?' Am Ende der URL, sollte es funktionieren, wenn Jsonp wird unterstützt – Rafay

+1

'$ .getJSON (" http://api.rottentomoutes.com/api/public/v1.0/movies .json? apikey = API_KEY_REMOVED & page_limit = 5? callback =? ", { ' – Rafay

0

Es sieht so aus, als ob Sie eine ungültige URL verwenden, die dieselbe Herkunftsrichtlinie verletzt.

Sie müssen die AJAX-Anfrage an dieselbe domain senden.
Ist dies die echte URL, die du haben möchtest, oder du hast sie einfach von ihrer Website kopiert ?!

Same origin policy auf 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

0

Sie verwenden sehen diesen Fehler, weil die Ajax-Anfrage (im Prinzip xhrXML) keine domänenübergreifende Kommunikation zulässt. Wenn Sie wirklich auf Ressourcen von einer anderen Domäne zugreifen möchten, können Sie versteckte iframe verwenden, um Inhalte von anderen Domänen zu holen. Es ist wirklich einfach und wurde bereits verwendet, bevor Ajax eingeführt wird.

Weitere Informationen Sie diese http://www.yaldex.com/ajax-tutorial-4/BBL0020.html (Bitte gehen Sie durch iframe Abschnitt nur)

lesen kann, aber ich Sie warnen, dass bestimmte Websites, die Sie dort Inhalte zum Beispiel Twitter innerhalb iframe zeigen nicht gestattet. Sie haben X-Frame-Option in ihrer Kopfzeile, die verhindert, dass ihre Seiten in einem Iframe angezeigt werden. Überprüfen Sie also zuerst die Kopfzeile Ihrer Ressource, die Sie mit iframe abrufen möchten.

0

Lösung für JSONP und domänenübergreifender Anfragen typeahead 0.9.1

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

Leider verwenden, aber die Antwort oben gibt einen mit dem faulen Tomaten api verboten 403

indem es & Rückruf Ändern =? anstatt? Callback =? es gibt das JSON-Objekt entsprechend auf localhost zurück

Verwandte Themen