面试资料积累JS-jsonp的工作原理

1.问题背景：
由于浏览器同源策略（同一个协议，同一个域名，同一端口号，当其中一个不满足的时候，请求就会发生跨域）的限制，非同源下的请求，都会产生跨域问题，jsonp即是为了解决这个问题出现的一种简便解决方案，举个简单的例子：

http://www.abc.com:3000 到https://www.abc.com:3000
请求会出现跨域 域名，端口号相同，但协议不同
http://www.abc.com:3000 至http://www.abc.com:3001
请求会出现跨域 域名，协议相同，但端口号不同
http://www.abc.com:3000 至 http://www.def.com:3000
请求会出现跨域 端口号，协议相同，但域名不同

2.突破同源策略
浏览器的同源策略把跨域请求都禁止了，但是页面中link,script, img ,iframe, a 标签是个例外，这些标签的外链是不受同源策略限制的。
jsonp就是利用了上面script标签特性来进行跨域数据访问的。
3.jsonp的实现机制

1. 与服务端约好定一个回调函数名，在客户端定义好这个函数，在请求url中添加callback = 函数名的查询字符 。
2. 服务端接收到请求之后，将函数名和需要返回的数据，拼接成“函数名（data）”函数执行的形式返回
3. 页面接收到数据后，解析完直接执行了这回调函数，这时数据就会成功传输到客户端。
4. 客户端代码

 var flightHandler = function(data){
 alert('我是jsonp请求过来的呀。')
}
var url = 'http://localhost:8080/jsonp/callback=flightHandler'
var script = document.createElement('script')
script.setAttribute('src',url);
doument.getElementByTagName('head')[0].appendChild(script)

5.服务端代码 ：koa2实现一个服务

app.use(async(ctx, next)=>{
	if(ctx.path == '/jsonp' && ctx.querystring){
		let queryArr = ctx.querystring.split('&');
		let queryObj= {}
		queryArr.forEach((item)=>{
			let temp = item.split('=')
			queryObj[temp[0]] = temp[1]
		})
		const callback = queryObj['callback']
		const obj = {
			price: '19',
			tickets:22
		}
		const args = JSON.stringtify(obj)
		ctx.body = `${callback}(${args})`
		
	}
	await next()
})

4.总结
所以，就是利用script标签没有跨域限制的‘漏洞’来达到与第三方通讯的目的。
当需要通讯时，本站脚本创建一个script元素，地址指向第三方的API网址，形如：并提供一个回调函数来接收数据（函数名可约定，或通过地址参数传递）
第三方产生的响应为json数据的包装（故称之为jsonp, 即json padding）,形如allback({“name”:'hax", “gender”:“Male”})，这些浏览器会调用callback函数，并传递解析后jsono对象作为参数，完成一次数据交互。