JSONP跨域的核心是利用<script>标签天然支持跨域的特性，通过客户端定义回调函数、动态创建script标签、服务端返回包裹回调的JS代码三步实现；仅支持GET请求，因script标签无法发送POST等请求且无错误处理机制，现代已由CORS替代。
JSONP 跨域的核心在于绕过浏览器的同源策略限制，不靠 XMLHttpRequest 或 fetch，而是利用 <script> 标签天然支持跨域加载 JS 文件的特性。它不是真正的“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 标签只能发起 GET 类型的 HTTP 请求，无法携带请求体（body），也不能设置请求头或使用 POST/PUT 等方法。
- URL 长度有限制，不适合传输大量数据
- 没有状态码、错误重试、超时控制等原生能力，需手动封装
- 服务端必须配合拼接回调函数名，否则返回内容无法执行
服务端需要做的关键配合
服务端不能直接返回 JSON 字符串，必须识别 URL 中的 callback 参数（名称可自定义，如 cb、jsoncallback），然后将原始数据套进该函数调用中返回：
立即学习“Java免费学习笔记（深入）”；
- 收到请求：
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 的兼容性思路。
