jsonp工作原理

1.问题背景

由于浏览器的同源策略（同一协议，域名，端口，当其中一个不满足的时候，就会发生跨域）的限制，非同源请求，都会产生跨域的问题，jsonp的出现就是为了解决这个问题。

2.突破同源策略

浏览器的同源策略，把跨域请求都禁止了，但是页面中带 src 的标签是个例外，比如sript，img，iframe，a这些标签的外链是不受同源策略的限制的
jsonp就是利用上面scrpt 标签的特性来进行跨域数据访问的

3.jsonp的实现机制

1.与服务端约定好一个回调的函数名，在客户端定义好这个函数，在请求url中添加 callback = 函数名的查询字符
2.服务端接收到请求之后，将函数名和需要返回的数据拼接成“函数名（data）”函数执行的方式返回
3.页面接收到数据后，解析完直接执行这个回调函数，这时数据就成功传输到了客户端

客户端代码

    var flightHandler = function (data) {
        alert('你查询的航班结果是：票价 ' + data.price + ' 元，' + '余票 ' + data.tickets + ' 张。');
    };

    var url = "http://localhost:8080/jsonp?callback=flightHandler";
    var script = document.createElement('script');
    script.setAttribute('src', url);
    document.getElementsByTagName('head')[0].appendChild(script);

服务端代码

app.use(async (ctx, next) => {
    if (ctx.path == '/jsonp' && ctx.querystring) {
        //querystring处理
        let queryArr = ctx.querystring.split("&");
        let queryObj = {};
        queryArr.forEach((item) => {
            let tmp = item.split("="); 
            queryObj[tmp[0]] = tmp[1];
        })
        const callback = queryObj['callback'];
        const obj = {
            price: '18',
            tickets: 33
        }
        const args = JSON.stringify(obj);
        ctx.body = `${callback}(${args})`;
    }
    await next();
})

总结

所以，jsonp就是利用<script>标签没有跨域限制的“漏洞”，来达到第三方通讯的目的。
当需要通讯时，本站脚本创建一个<script>标签，src指向第三方,的api网址，<script src=“http://www.test.com/params1=1&params2=2”></script>病提供一个回调函数来接收数据
第三方产生的响应为json数据的包装，故称为jsonp，like callback（{“name”：“gromy”}）
这样浏览器会调用callback函数，并传递解析后json对象作为参数，完成一次交互数据