WHAT
JSONP 是一种后端向前端提供数据的技术(其实是一种 Hack)。
用于绕开浏览器的跨域限制。
它已经过时了,不要再用了,使用 CORS 代替。
WHY
早期,受限于浏览器的同源策略,网站无法直接从不同源的服务端获取数据。
聪明的古人发现 script 标签不受这个限制(这其实是个漏洞),于是利用 script 标签开发了 JSONP 技术。
HOW
script 大致工作流程是:浏览器遇到 script 标签后,根据它的 src 属性去下载一段 JS 脚本并执行。
注意,这里的关键是,下载和执行的是可执行的 JS 脚本。
服务端为了将数据交付给客户端,可以将数据包裹在一个函数调用中,这样就形成了一个可执行的 JS 脚本。
至于这个函数的名字,可以靠前后端约定,也可以在 URL 中通过 Query 来指定。
示例
// 展示一下 jsonp 脚本可能长什么样子
// https://xxx.com/demo-data?jsonp=consumeData
const data = {
"name": "Bob",
"age": 18
}
// 客户端需要确保 consumeData 函数存在
consumeData(data)