如何在 fetch/axios 个跨站点请求上使用 JSONP

Question

我正在尝试在维基百科上执行 GET 请求 API。使用 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，它在 pre-flight 停止，请求方法为：OPTIONS .为什么它在 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，但是我在尝试更改 fetch/axios 请求的内容类型时没有成功，这些请求被发送为 text/html.

对可能出现的问题有什么想法吗？

Answer 1

我发现问题与请求的内容类型无关。

问题是因为 API（fetch 和 axios）不支持 jsonp 请求。 jsonp 的用法对我来说不够清楚，我可以在这里找到一个很好的解释：

虽然他们不支持它，但他们提供了执行 jsonp 请求的替代方法：

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

Answer 2

使用axios访问JSONP的推荐方法实际上是不使用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);
  }
});

Answer 3

运行 React 应用程序中的问题

Axios 不支持 JSONP，他们提供了执行 jsonp 请求的替代方法：

按照此 link 查看 axios 的 jsonp 的一些文档：公理：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,
                });
            }
        });
    }

Answer 4

yarn add simple-jsonp-promise 或 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)
}

如何在 fetch/axios 个跨站点请求上使用 JSONP

How to use JSONP on fetch/axios cross-site requests

ajax

jquery

fetch

axios