小刀jsonp跨域

经常说到jsonp，今天理一理。

同源策略

同协议，同域名，同端口；

会限制你的ajax，iframe操作，窗口信息的传递，无法获取跨域的cookie、localStorage、indexDB等；

jsonp

原理很简单，html中大部分的src不受同源策略限制，包括link、img、css(background-image等)，运用script中src自带的跨域属性请求后台接口

function addScript(url){
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = url;
    document.body.appendChild(script);
}

//回调句柄
function handle(data){
　　console.log(data);
}
//假设请求接口，约定callback字段

addScript(“http://******/getdata？callback=handle”);

　　node代码：

/* GET jsonp listing. */
router.get('/', function (req, res, next) {
　　 //模拟数据
    var data = {
        mess: 'hi'
    };
　　 //获取回调函数名
    var callback = req.query.callback;
    if (callback) {
        data = JSON.stringify(data);
　　　　 //返回为字符串
        res.send(`${callback}(${data})`);
    } else {
        res.send('nocallbak');
    }
});

　　回调结果：并没有JSON.parse

注意事项：

　　jsonp有很多限制值得注意，只能发送GET类型的请求，无法监测请求是否成功，请求一旦完成立马触发函数，控制的手段比较有限，但好在兼容性不错所有浏览器都支持，不用多余的配置。