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等参数信息，感兴趣的同学可以自己进行扩展