JSONP 的实现原理 Better

为什么要使用JSONP

由于浏览器的安全限制(同源策略),不允许AJAX访问跨域(协议、域名、端口有不同)的数据接口。

JSONP的实现原理

因为script标签不存在跨域限制。可以通过动态创建script标签的形式,把script标签的src属性,指向数据接口的地址。
这种数据获取方式,称为“JSONP”(JSON with Padding)

JSONP的具体实现过程

  1. 先在客户端定义一个回调函数,预定义对数据的操作;
  2. 把这个回调函数的名称,通过URL传参的形式,提交到服务端的数据接口;
  3. 服务端组织好数据,再拿客户端传递过来的函数名,拼接出调用这个函数的字符串,发送给客户端;
  4. 客户端拿到返回的字符串,当作脚本去执行,这样就能拿到JSONP的数据了;
    前端:
<script>
	function showInfo(data) {
		console.log(data)
	}
</script>
<script src="http://10.244.37.88:5000/getScript?callback=showInfo"></script>

后端(伪代码):

// 得到函数名 showInfo以后,执行下面操作
var scriptStr = `showInfo( ${JSON.stringify(data)} )`
return scriptStr
原文地址:https://www.cnblogs.com/huangtq/p/14572005.html