web-dev-qa-db-ja.com

fetch / axiosクロスサイトリクエストでJSONPを使用する方法

ウィキペディアAPIでGETリクエストを実行しようとしています。以下のようにjQueryを使用すると正常に機能します。

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

しかし、私はfetchまたはaxios apiを使用したいと思います。これは、リクエストメソッド[〜＃〜] options [〜＃〜]でpre-flightで停止します。なぜjQueryで機能するが、他の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);  
    });

私はそれがGETリクエストのContent-Typeに関連しているかもしれないことを見ました、jQueryではデフォルトはtext/plainのようですが、content-typeを変更しようとしても成功しませんでしたtext/htmlとして送信されるfetch/axiosリクエストの数。

何が問題になっているのでしょうか？

jqueryajaxfetchaxios
8
Luan Scudeler

この問題はリクエストのコンテンツタイプとは関係がないことがわかりました。

この問題は、API（fetchおよびaxios）がjsonp要求をサポートしていないという事実が原因でした。 jsonpの使用は私にとって十分に明確ではなかったので、ここで良い説明を見つけることができました： http://stackoverflow.com/a/6879276/4051961

彼らはそれをサポートしていませんが、jsonpリクエストを実行する代替手段を提供します：

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

13
Luan Scudeler

AxiosでJSONPにアクセスする推奨方法は、実際にはaxiosを使用しないことです。

  1. なぜ（ない）かに関する議論

  2. 同様の質問

  3. Axiosからの代替提案

短いインストールの場合：

npm install jsonp --save

次のように使用します：

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

React Applicationで問題に飛びつきました

AxiosはJSONPをサポートしていません。jsonpリクエストを実行するための代替手段を提供します。

Axiosのjsonpのドキュメントを参照するには、このリンクに従ってください：axios： https://github.com/mzabriskie/axios/blob/master/COOKBOOK.md#jsonp

ここに私のドキュメントがあります：

ステップ1： $ npm install jsonp --save

ステップ2：

import jsonp from 'jsonp';

（これはコンポーネントの上部にあります）

ステップ3：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