JSONP-Kreuzursprungsfehler 'Keine Access-Control-Allow-Origin-Kopfzeile vorhanden'

Question

Ich verwende Ajax, um Daten von Twitter über ihre API zu erhalten. Ich versuche jsonp zu benutzen und von dem, was ich sehen und verstehen kann, denke ich, dass ich alles richtig mache (natürlich nicht).

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script> 
<script> 
    $(document).ready(function() { 
     $.ajax({ 
      type: 'GET', 
      datatype: 'jsonp', 
      data: {}, 
      crossDomain: 'true', 
      url: "http://twitter.com/status/user_timeline/padraicb.json?count=10&callback=?", 
      error: function(textStatus, errorThrown) { 
       alert("error"); 
      }, 
      success: function(msg) { 
       console.log(msg); 
      } 
     }); 
    }); 
</script> 

Der obige Code generiert einen Fehler sowohl in Chrome und Firefox XMLHttpRequest kann http://twitter.com/status/user_timeline/padraicb.json?count=10&callback= nicht geladen?. Kein 'Access-Control-Allow-Origin'-Header ist auf der angeforderten Ressource vorhanden. Origin 'null' ist daher nicht erlaubt.

Von meinem Verständnis dachte ich, dass mit dem &callback=? und mit dem Typ jsonp setzen würde dies erfolgreich sein. Außerdem kann ich sehen, dass das JSON-Objekt in fiddler zurückgegeben wird und nicht vom Skript behandelt wird. Ich habe mehrere APIs mit dem gleichen Problem ausprobiert.

Eine solche API funktioniert auch, wenn sie in die Adressleiste eingegeben wird.

Also ich nach umfangreicher Suche und Suche muss ich einige, wie die Herkunft auf * setzen? Ich dachte, das wäre eher ein serverseitiges Problem?

Ich habe auch ?callback? versucht, aber ohne Erfolg.

Alle Ideen wäre super danke.

Answer 1

Die genannte Ressource unterstützt JSONP, so gibt es keine Notwendigkeit für CORS ... das Problem ist datatype: 'jsonp' sollte es dataType: 'jsonp' sein

$(document).ready(function() { 
    $.ajax({ 
     type: 'GET', 
     dataType: 'jsonp', 
     data: {}, 
     url: "http://twitter.com/status/user_timeline/padraicb.json?count=10&callback=?", 
     error: function (jqXHR, textStatus, errorThrown) { 
      console.log(jqXHR) 
     }, 
     success: function (msg) { 
      console.log(msg); 
     } 
    }); 
}); 

Demo: Fiddle

Answer 2

Die Kopfzeile soll auf den Servern von Twitter gesetzt werden, wenn sie antworten. Wenn es nicht verfügbar ist, bedeutet dies, dass Sie nicht auf diese Ressource zugreifen können, indem Sie AJAX von einem beliebigen Ort außerhalb ihrer eigenen Domäne verwenden.
Daher können Sie ihre API von Javascript im Browser nicht verwenden. Sie haben Ihren eigenen Server eingerichtet, der als Zwischenressource für die Kommunikation mit Twitter API dient.

Bearbeiten: Auch an dieser Stelle darauf hinweisen, dass Twitter ihre nicht authentifizierten API-Anfragen schließt. Sie müssen eine App mit Twitter einrichten und den API-Schlüssel verwenden, um Anfragen zu stellen.