web-dev-qa-db-fra.com

Erreur JSONP d'origine: 'aucun en-tête Access-Control-Allow-Origin n'est présent'

J'utilise Ajax pour obtenir des données de Twitter en utilisant leur API. J'essaie d'utiliser jsonp et de ce que je peux voir et comprendre, je pense que je fais tout droit (évidemment pas si). 

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

Le code ci-dessus génère une erreur dans Chrome et Firefox. XMLHttpRequest ne peut pas charger http://Twitter.com/status/user_timeline/padraicb.json?count=10&callback= ?. Aucun en-tête 'Access-Control-Allow-Origin' n'est présent sur la ressource demandée. Origin 'null' n'est donc pas autorisé à accéder.

D'après ma compréhension, je pensais qu'avoir le &callback=? et le type défini sur jsonp permettrait à ceci de réussir. De plus, je peux voir que l'objet JSON est renvoyé dans Fiddler, il n'est simplement pas traité par le script. J'ai essayé plusieurs API avec le même problème.

Une telle API fonctionne également lorsqu'elle est entrée dans la barre d'adresse.

Donc, après des recherches approfondies, est-ce que j’ai besoin de savoir comment définir l’origine à *? Je pensais que c'était plus un problème côté serveur? 

J'ai aussi essayé ?callback? mais en vain.

Toute idée serait génial merci.

javascriptajaxjsonjquery
9
Corey

Cette ressource supporte jsonp, il n’ya donc pas besoin de CORS ... le problème est datatype: 'jsonp' il devrait être dataType: 'jsonp'

$(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);
        }
    });
});

Démo: Fiddle

18
Arun P Johny

L'en-tête est censé être défini sur les serveurs de Twitter lorsqu'ils répondent. Si ce n'est pas disponible, cela signifie que vous ne pouvez pas accéder à cette ressource en utilisant AJAX de n'importe où en dehors de son propre domaine.
Par conséquent, vous ne pouvez pas utiliser leur API à partir de javascript sur le navigateur. Vous avez votre propre serveur configuré qui sert de ressource intermédiaire pour communiquer avec l'API Twitter. 

Edit: Il est également intéressant de noter à ce stade que Twitter ferme leurs requêtes d'API non authentifiées. Vous devez configurer une application avec Twitter et utiliser la clé API pour faire des demandes. 

0
Munim