Fetch / axios如何发起 JSONP 跨域请求？

JSONP（JSON with Padding）是一种老旧的跨域数据交换格式，它通过动态创建<script>标签的方式绕过同源策略。尽管现在推荐使用CORS（Cross-Origin Resource Sharing）机制作为跨域请求的解决方案，但有些情况下仍然可能需要使用JSONP。

Fetch API 原生并不支持 JSONP，因为 Fetch API 是基于 Promise 设计的，而 JSONP 的工作原理和 Fetch API 的设计理念不符。因此，如果需要使用 Fetch 发起 JSONP 请求，实际上是无法直接实现的，你会需要自己封装一个实现。

而对于 Axios，它也不直接支持 JSONP。不过，你可以手动实现或使用第三方库来实现 JSONP 请求。以下是使用第三方库发起 JSONP 请求的例子。

首先，假设你已经有了一个支持 JSONP 的服务端接口。下面是如何在客户端使用 axios 结合一个第三方库如 jsonp 来发起 JSONP 请求的示例：

javascript
// 引入 axios 和 jsonp 库
import axios from 'axios';
import jsonpAdapter from 'axios-jsonp';

// 你要请求的 API 地址
const jsonpUrl = 'https://example.com/api/jsonp?callback=?';

// 使用 axios 发起请求，配置 adapter 为 jsonpAdapter
axios({
    url: jsonpUrl,
    adapter: jsonpAdapter
})
.then(response => {
    // 处理响应
    console.log(response.data);
})
.catch(error => {
    // 处理错误
    console.error(error);
});

在上面的代码中：

1. 我们导入了 axios 和 axios-jsonp。
2. 调用 axios 时，我们配置了 adapter 选项为 jsonpAdapter，这样就可以让 axios 支持 JSONP 请求。
3. 之后就像处理任何其他类型的 axios 请求一样处理响应或错误。

需要注意的是，JSONP 只支持 GET 请求。而且，由于 JSONP 本质上是通过 <script> 标签加载脚本，因此它存在安全风险，因为这种方式可能会运行恶意代码。同时，由于 JSONP 是不支持错误处理的，因此在网络或者服务器出现错误时，你无法像普通的 AJAX 请求那样捕获错误。

在现代的Web开发实践中，CORS 是更安全和更灵活的跨域解决方案，而且它得到了所有现代浏览器的支持。因此，在可能的情况下，建议使用 CORS 而不是 JSONP。