JSONP原理以及实现

原理

利用script标签的src属性的不受同源策略的限制，其主要的实现方式就是创建callback方法、动态创建script标签, 并且执行后台返回的回调

// 实现
   function jsonp({ url, params, callback }) {
            return new Promise((resolve, reject) => {
                var script = document.createElement('script');
                window[callback] = function(data){
                    resolve(data);
                    document.body.removeChild(script);
                }
  
                params = {...params,callback};
                let arrs = [];

                for(let key in params){
                    arrs.push(`${key} = ${params[key]}`);
                } 
               // 2. 创建script标签
                script.src = `${url}?${arrs.join('&')}`;
            // http:// localhost:3000/show?callback=fn
                docuemnt.getElementsByTagName('head')[0].appendChild(script)
            })
        }
 // 使用
        function fn(data) {
            console.log(data)
        }
        jsonp({
            url: 'http://localhost:300/show',
            params: {},
            callback: 'fn'  // 1. 创建callback 的方法
        }).then(data => {

            console.log(data);
        })

// 服务器端
let  express= require('express');
let app = express();
app.get('/show',(req,res) =>{
   let {callback} = req.query;
   res.send('hello`);
})
app.listen(3000)