小刀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类型的请求,无法监测请求是否成功,请求一旦完成立马触发函数,控制的手段比较有限,但好在兼容性不错所有浏览器都支持,不用多余的配置。