web-dev-qa-db-fra.com

Erreur de renvoi de la requête JSONP: "SyntaxError non interceptée: jeton inattendu:"

J'essaie donc de faire une demande à l'API Stack Exchange avec le code jQuery suivant:

$.ajax({                                                                                                                                                                                                        
    type: 'POST',                                                                                                                                                                                                 
    url: 'http://api.stackoverflow.com/1.1/stats',                                                                                                                                              
    dataType: 'jsonp',                                                                                                                                                                                                
    success: function() { console.log('Success!'); },                                                                                                                                                                                       
    error: function() { console.log('Uh Oh!'); }                                                                                                                                                              
});

Mais lorsque j'ouvre le fichier sur ma machine, dans FireFox ou Chrome, et que je fais la demande, j'obtiens cette erreur:

Resource interpreted as Script but transferred with MIME type application/json.
Uncaught SyntaxError: Unexpected token :
Uh Oh!

Je n'ai aucune idée de ce qui se passe. Je sais que l'API Stack Exchange Gzips ses réponses, cela causerait-il des problèmes?

javascriptajaxjquerystackexchange-api
25
theabraham

Vous devez définir un paramètre non conventionnel pour que l'API SO fonctionne. Plutôt que le callback conventionnel, vous devez passer un paramètre jsonp.

De plus, vous ne pouvez pas faire POST avec JSONP.

$.ajax({                                                                                                                                                                                                        
    type: 'GET',                                                                                                                                                                                                 
    url: 'http://api.stackoverflow.com/1.1/stats',                                                                                                                                              
    dataType: 'jsonp',                                                                                                                                                                                                
    success: function() { console.log('Success!'); },                                                                                                                                                                                       
    error: function() { console.log('Uh Oh!'); },
    jsonp: 'jsonp'                                                                                                                                                
});

Il n'est pas possible de faire un domaine croisé AJAX en utilisant le XMLHTTPRequest conventionnel. C'est pour des raisons de sécurité (c'est ce qu'on appelle la même politique d'origine).

Il existe une solution de contournement. Les balises script ne sont pas soumises à cette restriction. Cela signifie que vous pouvez insérer une balise script dans le document qui appelle une URL. Si vous définissez une fonction accessible à l'échelle mondiale dans votre script et dites au serveur distant comment cette fonction est appelée, le serveur peut transmettre du code qui encapsule les données à envoyer lors d'un appel à cette fonction.

La difficulté que vous avez rencontrée est avec l'API StackOverflow. Par convention, vous utiliseriez l'argument callback dans votre requête pour indiquer au serveur comment votre fonction est appelée. Cependant, l'API de StackOverflow vous demande d'utiliser à la place le paramètre jsonp.

21
lonesomeday

Essayez cette URL: http://api.stackoverflow.com/1.1/stats?jsonp=callme

"callme" est le nom de votre fonction de rappel - dans votre GLOBAL NAMESPACE (objet fenêtre).

Soit dit en passant, si vous utilisez Firefox et que le module complémentaire JSONView est installé, vous pouvez tester directement l'URL ci-dessus (et la vôtre pour comparaison).

Résultat de l'appel de l'URL:

callme({
  "statistics": [
...
  ]
})
4
Mörre