Comment utiliser JSONP sur fetch/axios de la croix-des demandes de site
Je suis en train de faire une requête GET sur wikipédia API. À l'aide de jQuery comme ci-dessous fonctionne très bien:
$.ajax({
url: 'https://en.wikipedia.org/w/api.php?format=json&action=query&generator=search&gsrnamespace=0&gsrlimit=10&prop=pageimages|extracts&pilimit=max&exintro&explaintext&exsentences=1&exlimit=max&gsrsearch=Test&callback=JSON_CALLBACK',
type: 'GET',
headers: {'X-Requested-With': 'XMLHttpRequest'},
crossDomain: true,
dataType: 'jsonp'
}).done(function(data) {
console.log("Data: ", data);
});
Mais je veux l'utiliser fetch ou axios api, qui s'arrête à pré-vol avec la méthode de requête: OPTIONS. Pourquoi il fonctionne en jQuery, mais pas dans les autres Api?
axios.get('https://en.wikipedia.org/w/api.php?format=json&action=query&generator=search&gsrnamespace=0&gsrlimit=10&prop=pageimages|extracts&pilimit=max&exintro&explaintext&exsentences=1&exlimit=max&gsrsearch=Test&callback=JSON_CALLBACK',
{ headers: {'X-Requested-With': 'XMLHttpRequest',
'content-type': 'text/plain'}
})
.then(function (response) {
console.log("Response: ", response);
});
J'ai vu qu'il pourrait être lié au Type de Contenu de la demande d'OBTENIR, sur jQuery par défaut semble être text/plain, cependant je n'ai pas eu de succès lors de la tentative de modifier le contenu-type d'extraction/axios demandes qui sont envoyés comme texte/html.
Toute réflexion sur ce que pourrait être le problème?
- Je ne pense pas que axios prend en charge jsonp.
- vous avez raison, je vais l'enlever
Vous devez vous connecter pour publier un commentaire.
J'ai trouvé que le problème n'est pas lié au type de contenu de la demande.
Le problème était dû au fait que les Api (fetch et axios) ne prend pas en charge jsonp demandes. L'utilisation de jsonp n'était pas assez clair pour moi, que j'ai pu trouver une bonne explication ici: http://stackoverflow.com/a/6879276/4051961
Bien qu'ils ne le supportent pas, ils offre des alternatives pour effectuer jsonp demandes:
axios: https://github.com/mzabriskie/axios/blob/master/COOKBOOK.md#jsonp
fetch: https://www.npmjs.com/package/fetch-jsonp
Méthode recommandée pour l'accès JSONP avec axios est en fait de ne pas utiliser axios:
Une question similaire
Suggestion Alternative de Axios
En court installer:
l'utiliser comme:
A couru dans le problème de Réagir Application
Axios ne prend pas en charge JSONP ils offre des alternatives pour effectuer jsonp demandes:
Suivez ce lien pour voir un peu de documentation pour jsonp pour axios:
axios: https://github.com/mzabriskie/axios/blob/master/COOKBOOK.md#jsonp
Voici ma documentation:
Étape 1:
$ npm install jsonp --save
Étape 2:
(ce qui se passe au-dessus de votre composant)
Étape 3: Créer une méthode dans votre Réagissent Composant: