So verwenden Sie JSONP für standortübergreifende Abruf-/Axios-Anforderungen

Ich versuche, eine GET-Anfrage auf der Wikipedia-API zu machen. Die Verwendung von jQuery wie unten funktioniert gut:

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

Aber ich möchte fetch oder axios api verwenden, was bei aufhört Vorflug mit Anfragemethode: OPTIONEN. Warum funktioniert es in jQuery, aber nicht in den anderen APIs?

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

Ich habe gesehen, dass es möglicherweise mit dem Content-Type der GET-Anforderung zusammenhängt, bei jQuery scheint dies die Standardeinstellung zu sein Text/klarjedoch hatte ich keinen Erfolg beim Versuch, den Inhaltstyp von Abruf-/Axios-Anforderungen zu ändern, die als gesendet werden text/html.

Irgendwelche Gedanken darüber, was das Problem sein könnte?

Ich habe festgestellt, dass das Problem nicht mit dem Inhaltstyp der Anforderungen zusammenhängt.

Das Problem lag daran, dass die APIs (Fetch und Axios) nicht unterstützt werden jsonp Anfragen. Die Verwendung von jsonp war mir nicht klar genug, ich konnte hier eine gute Erklärung finden: http://stackoverflow.com/a/6879276/4051961

Obwohl sie es nicht unterstützen, bieten sie Alternativen zum Ausführen an jsonp Anfragen:

Axios: https://github.com/mzabriskie/axios/blob/master/COOKBOOK.md#jsonp

bringen: https://www.npmjs.com/package/fetch-jsonp

Die empfohlene Methode für den Zugriff auf JSONP mit Axios besteht darin, Axios nicht zu verwenden:

1. Die Diskussion über das Warum (nicht)

2. Eine ähnliche Frage

3. Alternativvorschlag von Axios

Kurz installieren:

npm install jsonp --save

benutze es wie:

var jsonp = require('jsonp');

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

In einer React-Anwendung auf das Problem gestoßen

Axios unterstützt kein JSONP, sondern bietet Alternativen zum Ausführen von JSONP-Anforderungen:

Folgen Sie diesem Link, um eine Dokumentation für jsonp für axios anzuzeigen: axios: https://github.com/mzabriskie/axios/blob/master/COOKBOOK.md#jsonp

Hier meine Dokumentation:

Schritt 1: $ npm install jsonp --save

Schritt 2:

import jsonp from 'jsonp';

(dies geht an die Spitze Ihrer Komponente)

Schritt 3: Erstellen Sie eine Methode in Ihrer React-Komponente:

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

yarn add simple-jsonp-promise oder npm install simple-jsonp-promise

import jsonp from 'simple-jsonp-promise'

async function Test () {
  const url="http://..."
  const params = {param1: 1, param2: 2}

  const response = await jsonp(url, {data: params})
  console.log('response:', response)
}