web-dev-qa-db-fra.com

Comment utiliser JSONP sur les requêtes intersite fetch / axios

J'essaie de faire une demande GET sur l'API wikipedia. L'utilisation de jQuery comme ci-dessous fonctionne 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 utiliser fetch ou axios api, qui s'arrête à pré-vol avec la méthode de demande: OPTIONS . Pourquoi cela fonctionne-t-il dans 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 que cela pouvait être lié au Content-Type de la requête GET, sur jQuery, la valeur par défaut semble être text/plain, mais je n'ai pas réussi en essayant de modifier le type de contenu des requêtes fetch/axios envoyées sous la forme text/html.

Avez-vous des réflexions sur ce qui pourrait être le problème?

jqueryajaxfetchaxios
8
Luan Scudeler

J'ai trouvé que le problème n'était pas lié au type de contenu des demandes.

Le problème était dû au fait que les API (fetch et axios) ne prennent pas en charge les requêtes jsonp . L'utilisation de jsonp n'était pas assez claire pour moi, j'ai pu trouver une bonne explication ici: http://stackoverflow.com/a/6879276/4051961

Bien qu'ils ne le prennent pas en charge, ils proposent des alternatives pour effectuer jsonp les requêtes:

axios: https://github.com/mzabriskie/axios/blob/master/COOKBOOK.md#jsonp
chercher: https://www.npmjs.com/package/fetch-jsonp

13
Luan Scudeler

Le moyen recommandé d'accéder à JSONP avec axios est en fait de ne pas utiliser axios:

  1. La discussion sur pourquoi (pas)

  2. ne question similaire

  3. Suggestion alternative d'Axios

En bref: 

npm install jsonp --save

utilisez-le comme: 

var jsonp = require('jsonp');

jsonp('http://www.example.com/foo', null, function (err, data) {
  if (err) {
    console.error(err.message);
  } else {
    console.log(data);
  }
});
9
DominikAngerer

Ran dans le problème dans une React Application

Axios ne prend pas en charge JSONP, il propose des alternatives pour effectuer les requêtes jsonp:

Suivez ce lien pour voir la documentation de 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:

import jsonp from 'jsonp';

(cela va en haut de votre composant)

Étape 3: Créez une méthode dans votre composant React:

JSONP () {
        jsonp( "https://*YourUrlHere.jsonp", { name: 'Name Of JSONP Callback Function' }, (error, data) => {
            if (error) {
                this.setState({
                    error,
                });
            } else {
                this.setState({
                    data: data,
                });
            }
        });
    }
2
CryptoRuff