# JSONP原理及实现

# 基本原理

基本原理： 主要就是利用了 script 标签的src没有跨域限制来完成的。

# 执行过程

执行过程：

• 前端定义一个解析函数(如: jsonpCallback = function (res) {})
• 通过params的形式包装script标签的请求参数，并且声明执行函数(如cb=jsonpCallback)
• 后端获取到前端声明的执行函数(jsonpCallback)，并以带上参数且调用执行函数的方式传递给前端
• 前端在script标签返回资源的时候就会去执行jsonpCallback并通过回调函数的方式拿到数据了。

# 优缺点

缺点：

• 只能进行GET请求

优点：

• 兼容性好，在一些古老的浏览器中都可以运行

# 案例分析

先来看看我们要实现一个什么效果：

在一个叫index.html的文件中有以下代码：

<script type='text/javascript'>
    window.jsonpCallback = function (res) {
        console.log(res)
    }
</script>
<script src='http://localhost:8080/api/jsonp?id=1&cb=jsonpCallback' type='text/javascript'></script>

然后我本地有一个文件server.js它会使用node提供一个服务，来模拟服务器。

并且定义一个接口/api/jsonp来查询id对应的数据。

当我打开index.html的时候就会加载script标签，并执行了此次跨域请求。

# 前期准备

• 我在本地新建一个文件夹node-cors
• 并在此目录下npm init，初始化package.json
• 安装koa(node的一个轻量级框架)
• 新建文件夹jsonp，并新建index.html和server.js，一个写前端代码，一个写后端

mkdir node-cors && cd node-cors
npm init
cnpm i --save-dev koa
mkdir jsonp && cd jsonp
touch index.html
touch server.js

# 后端代码

由于JSONP的实现需要前后端配合，先来写一下后端的实现：

（看不懂没关系，下面的前端简单实现会做解释）

const Koa = require('koa');
const app = new Koa();
const items = [{ id: 1, title: 'title1' }, { id: 2, title: 'title2' }]

app.use(async