jsonp
1、为什么会有跨域
浏览器是同源策略,他是一个约定也是最核心的内容,同时也是安全性的最佳保障。试想一下,如果没有这种限制的话,一个页面同时加载了a与b两个域下的js文件,那么他们的document以及cookie等信息都是共享的,也就是说a可以拿到b域下的信息,反之b也可以拿到a域下的信息,这样的结果是非常可怕的
2、同源的概念
两个页面具有相同的协议(protocol),主机(host)和端口号(port)。可以将下列代码拷贝到控制台进行执行,查看结果
console.log(location.protocal); // 查看当前页面的协议
console.log(location.hostname); // 查看当前页面的域名(主机名)
console.log(location.port); // 查看当前页面访问的端口号
端口号大部分是80(http)、443(https)
3、jsonp实现原理
jsonp的实现其实就是向头部插入一段script标签,然后在window上添加一个方法。当script请求返回的时候,会执行的返回内容。返回内容为 添加到windows上的方法(returnValue);
比如
设置的方法为jsonpCb1, 接口返回的实际数据为hello world,则加载后的请求返回实际的数据就是jsonpCb1(‘hello world’)
4、jsonp实现方法
let count = 0; // 计数器,保证所有请求的回调函数不相同
function jsonp(url, params, callback){
let script = document.createElement('script');
let cb = `callback${count++}`; // 后端实际根据这个参数去返回的方法名
url += url.includes('?') ? `&callback=${cb}` : `?callback=${cb}`;
script.src = url;
function clean() {
script.parentNode.removeChild(script); // 移除script标签
window[cb] = null; // 把回调函数置为空
}
// 实际请求成功获取到的数据
window[cb] = result => {
cleanup();
callback(null, result);
}; // 请求有响应
// 请求错误监听
script.onerror = function(e) {
cleanup();
callback(e, null);
};
document.head.appendChild(script); // 插入到dom中,进行实际请求
}
上述大概实现了一个简单的jsonp请求,实际还可以设置timeout等参数信息,感兴趣的同学可以自己进行扩展