JSONP
JSONP是「带填充的JSON」(JSON with Padding, 又称JSON-P)的简称, 是一种借助HTML的script元素标签向其他域名的服务器请求数据, 从而绕过浏览器同源策略的跨域数据请求方式。它的核心做法是让页面预先声明一个回调函数, 由服务器把JSON数据包裹在该函数的调用中返回, 浏览器把响应当作脚本执行, 页面由此拿到数据。JSONP在2000年代中期提出, 兼容性极好但只支持GET请求, 安全性较弱, 如今主要为老旧系统与部分第三方接口沿用。
定义
JSONP是一种非官方的跨域数据交互方式, 其名称的含义是把JSON数据填充进一段JavaScript函数调用之中。它并不使用XMLHttpRequest这一Ajax核心对象, 而是依赖HTML中的script元素: 该元素可以通过src属性加载非同源的脚本文件, 并且在加载完成后由浏览器直接执行[1][2]。
因此JSONP本质上是页面与服务器之间的一种约定, 而不是某项正式标准。约定的一方在页面中预先定义好一个全局函数, 另一方在服务器上把请求到的数据写成对该函数的调用再返回, 页面收到脚本后立即执行, 数据便以函数实参的形式进入了页面代码。据一篇被引用较多的2005年博文记载, 这种以回调函数作为填充的用法由软件开发者Bob Ippolito提出[3]。
原理
JSONP之所以能跨域, 根源在于浏览器同源策略的特殊安排。同源策略要求协议、域名、端口三者完全相同, 否则脚本不能读取对方的数据, 但为了便于从外部引用第三方库、样式与图片, 浏览器允许页面嵌入来自其他源的脚本资源并执行。JSONP正是利用了这一处宽容: script标签发起的加载不受同源限制, 返回内容被当作JavaScript执行[4][5]。
一次典型的JSONP请求按如下步骤完成: 页面先定义一个用于接收数据的全局回调函数, 再动态创建script元素, 把跨域接口地址写在src中, 并在地址后面附加一个指明回调函数名的查询参数; 服务器解析该参数, 拼出形如回调名(JSON数据)的文本并返回; 浏览器执行这段脚本, 回调函数被调用, 数据随之进入页面[6]。
请求的参数名与响应格式并无统一标准。常见做法是使用callback或jsonp作为查询参数名, 回调函数名则由前端随机生成, 请求结束后再把该全局函数删除, 以免多次请求之间相互覆盖或长期占用全局作用域[7]。javascript客户端与服务器之间的交互过程可概括为: 页面把回调名放进请求地址发给服务器, 服务器把数据包进回调名返回给页面执行。
发展历程
在JSONP出现以前, 前端获取其他域名数据的手段很有限。表单提交会使页面刷新, 用image元素构造的GET请求只能判断成败、无法读取返回内容, 直到script元素可以被动态创建并指定地址, 页面才有办法拿到完整的跨域数据[6]。2005年7月, George Jempty曾建议在JSON前附加一个可选的变量赋值; 2005年12月, Bob Ippolito提出了以回调函数作为填充的完整方案, 这一形式随后被大量Web 2.0应用采用[3][8]。
此后JSONP被整合进多个主流前端框架与工具库, 例如jQuery在处理dataType为jsonp的请求时, 会自动生成随机回调名并向地址拼接callback参数, 请求结束后移除动态插入的script元素[7][2]。Angular等框架也提供了相应的JSONP请求模块, 用于在服务器不支持CORS协议时发起跨域调用[9]。
随着跨源资源共享(CORS)成为W3C标准并被现代浏览器普遍支持, JSONP在跨域方案中的主流位置被取代。CORS通过HTTP响应头协商授权, 除GET之外还支持POST等其他请求方法, 错误处理也优于JSONP; JSONP目前主要保留在需要兼容老旧浏览器或对接仅支持JSONP的第三方服务的场合[10][11]。
应用
JSONP最常见的用途是调用第三方提供的公开数据接口。当对方服务器只提供JSONP形式的接口、不便修改服务端配置时, 页面可以直接通过script标签取得天气、新闻、统计数据一类只读内容, 无需额外的后端改造[4][12]。
在兼容性要求较高的项目里, JSONP也作为兜底手段使用。它依赖浏览器原生支持的script元素, 在早期浏览器中同样可用, 因此部分需要兼容低版本IE的系统、广告投放与统计类软件开发工具包, 仍把JSONP作为可选的跨域方式; 一些项目会同时实现JSONP与CORS, 再根据客户端环境选择其中一种[4][12]。
局限
JSONP最突出的限制是请求方法单一。由于数据只能通过URL查询参数传递、由script的src属性发起加载, 它无法发送POST等会携带请求体的请求, 也无法设置自定义请求头, 因此不适合表单提交、文件上传以及需要携带Authorization等头部信息的接口调用[4][11]。
安全性也是JSONP难以回避的短板。脚本一旦被加载就会被浏览器执行, 若对方服务器的返回内容中混入恶意代码, 页面将直接执行它; 又因为script请求不受同源策略约束, 其他站点可以构造跨域请求获取数据, 在用户已登录目标站点的情况下存在被冒用的风险。相关文献也提到, 回调函数名被篡改可能引发反射型文件下载一类攻击[2][4]。
此外, JSONP还缺乏统一规范与完善的错误处理。查询参数的名称、回调函数的命名约定在各家接口之间并不一致, 请求失败时也难以像常规Ajax那样通过状态码判断原因; 每个请求都需要挂载全局函数或管理动态插入的script元素, 实现上比CORS和fetch繁琐[2][4]。
参见
参考资料
- 【Ajax进阶】跨域和JSONP的学习 [引用日期2026-10-14]
- JSONP [引用日期2026-10-14]
- JSONP [引用日期2026-10-14]
- huaweicloud.com 上的网页 [引用日期2026-10-14]
- 前端百题斩【026】——浏览器出让安全性造就JSONP [引用日期2026-10-14]
- 什么是JSONP [引用日期2026-10-14]
- jQuery源码分析系列(35) : Ajax [引用日期2026-10-14]
- JSONP - Wikipedia, la enciclopedia libre [引用日期2026-10-14]
- HTTP: Make a JSONP requestlink [引用日期2026-10-14]
- 跨来源资源共享 [引用日期2026-10-14]
- js跨域实现 [引用日期2026-10-14]
- JSONP 存在的意义是什么？ [引用日期2026-10-14]