jsonp跨域的核心是利用标签天然支持跨域的特性,通过客户端定义回调函数、动态创建script标签、服务端返回包裹回调的js代码三步实现;仅支持get请求,因script标签无法发送post等请求且无错误处理机制,现代已由cors替代。

JSONP 跨域的核心在于绕过浏览器的同源策略限制,不靠 XMLHttpRequest 或 fetch,而是利用 <script> 标签天然支持跨域加载 JS 文件的特性</script>。它不是真正的“Ajax”,而是一种基于脚本注入的数据通信模式。
JSONP 的三步执行流程
整个过程分客户端准备、服务端响应、浏览器自动执行三个环节:
-
客户端定义回调函数:比如
window.handleData = function(data) { console.log(data); };,这个函数名会作为参数传给服务端 -
动态创建 script 标签:设置其
src属性为跨域 URL,并带上回调函数名,例如:https://api.example.com/data?callback=handleData -
服务端返回可执行 JS 代码:不是纯 JSON,而是包裹在回调函数里的调用语句,如:
handleData({"name": "张三", "age": 28});。浏览器加载该脚本后立即执行,从而触发客户端预设的函数并传入数据
为什么只支持 GET 请求
因为 JSONP 本质是通过 <script src="..."></script> 发起请求,而 script 标签只能发起 GET 类型的 HTTP 请求,无法携带请求体(body),也不能设置请求头或使用 POST/PUT 等方法。
- URL 长度有限制,不适合传输大量数据
- 没有状态码、错误重试、超时控制等原生能力,需手动封装
- 服务端必须配合拼接回调函数名,否则返回内容无法执行
服务端需要做的关键配合
服务端不能直接返回 JSON 字符串,必须识别 URL 中的 callback 参数(名称可自定义,如 cb、jsoncallback),然后将原始数据套进该函数调用中返回:
- 收到请求:
GET /user?id=123&callback=onUserLoaded - 解析出
callback值为onUserLoaded - 构造响应体:
onUserLoaded({"id": 123, "username": "admin"}); - 响应头建议设置为
Content-Type: application/javascript
简单手写一个 JSONP 请求函数
便于理解底层逻辑,不依赖库也能实现:
- 生成唯一回调名,避免冲突,比如
__jsonp_cb_12345 - 把回调函数挂到
window上,等待服务端调用 - 插入 script 标签,加载带 callback 参数的 URL
- 添加超时机制和清理逻辑(加载完成后删掉 script 和 window 上的函数)
现代项目中已普遍用 CORS 替代 JSONP,但理解它有助于看清跨域问题的演进脉络和早期 Web 的兼容性思路。
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南











