简单说什么是 JSONP

125 阅读1分钟

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)

参考