JSONP的原理是什么？

尽管浏览器有同源策略，但是<script>标签的src属性不会被同源策略所约束，可以获取任意服务器上的脚本并执行。jsonp通过插入<script>标签的方式来实现跨域，参数只能通过url传入，仅能支持get请求。

实现原理:

1. 创建callback方法
2. 插入script标签
3. 后台接受到请求，解析前端传过去的callback方法，返回该方法的调用，并且数据作为参数传入该方法
4. 前端执行服务端返回的方法调用

jsonp源码实现

function jsonp({url,params,callback}){

    return new Promise((resolve,reject)=>{

        //创建script标签
        let script = document.createElement('script');

        //将回调函数挂在window上
        window[callback] = function(data){
            resolve(data);
            //代码执行后，删除插入的script标签
            document.body.removeChild(script);
        };

        //回调函数加在请求地址上
        params = {...params,callback};//name=xinran001&callback=show
        let ary = [];
        for(let key in params){
            ary.push(`${key}=${params[key]}`);
        }

        script.src = `${url}?${ary.join('&')}`;

        document.body.appendChild(script);

    });

}

jsonp使用:

jsonp({
    url:'//localhost:8080/show',
    params:{
        //code
    },
    callback: 'show'
}).then(data=>{
    console.log( data );
})

jsonp服务端代码(node):

//express启动一个后台服务器
let express = require('express');
let app = express();

app.get('/show',(req,res)=>{

    let {callback} = req.query;

    res.send(`${callback}('Hello world!')`);

});

app.listen( 8080 );