JSONP 跨域本质是利用 script 标签加载远程 JS 并执行回调函数，必须服务端支持 callback 参数并返回 text/javascript 类型的可执行代码，前端需动态生成唯一回调名、加超时与错误处理，仅适用于可信域名且现代项目应优先用 CORS。
JavaScript 中处理复杂的 JSONP 跨域请求，核心不是“拼参数”或“套模板”，而是理解它的运行机制和边界限制。它本质是利用 <script></script> 标签加载远程 JS 的能力，把数据包装成函数调用执行——所以没有真正意义上的“复杂请求”，只有更严谨的封装和容错设计。
JSONP 请求必须是 GET，且依赖服务端配合
浏览器不拦截 <script src="https://other.com/api?callback=fn123"></script>，但服务端必须返回类似 fn123({"name":"张三","age":28}) 的可执行 JS 代码。如果后端不支持 callback 参数、不按约定包裹数据，前端再怎么写都失败。
- 确认接口文档是否明确标注“支持 JSONP”，并说明回调参数名（常见为
callback或jsoncallback） - 服务端返回内容类型应为
text/javascript，不能是application/json - 若接口要求 token、timestamp、sign 等动态参数，需在拼 URL 时一并加入，例如：
https://api.example.com/data?callback=cb_123&token=abc&ts=1724890380&sign=xyz
手动封装健壮的 JSONP 函数，避免全局污染
不要直接写 window.cb_123 = function(){...}，容易覆盖已有变量或引发冲突。应动态生成唯一函数名，并清理资源。
- 用时间戳+随机数生成唯一回调名，如
jsonp_cb_1724890380_4827 - 将回调函数挂到
window下，但请求完成后立即delete window[回调名] - 添加超时控制：设置
setTimeout，超过 10 秒未执行回调则报错并移除 script 标签 - 监听
script.onerror捕获加载失败（如 404、跨域拒绝、语法错误）
处理嵌套结构、数组或多数据场景
JSONP 返回的始终是一段 JS 执行语句，数据本身可以是任意合法 JSON：对象、数组、字符串、布尔值甚至 null。所谓“复杂”，往往指数据结构深或需预处理。
立即学习“Java免费学习笔记（深入）”；
- 回调函数内可直接解构或遍历，例如：
cb(data.items?.map(item => ({...item, id: item.id.toString()}))) - 若需多次调用同一接口（如分页），每次都要生成新回调名，不可复用
- 避免在回调中直接操作 DOM 大量节点；建议先格式化数据，再批量渲染
安全与兼容性注意事项
JSONP 没有内置校验机制，服务端返回任何 JS 都会被执行——这是最大风险点。
- 只对接可信域名使用 JSONP，禁止用于用户可控的 URL（防 XSS）
- 不传敏感参数（如 token 放 query 中易泄露），优先走 HTTPS
- 老项目需兼容 IE8/9 时可用；现代项目应首选 CORS，JSONP 仅作兜底或对接遗留系统
- 无法携带 Cookie（除非服务端额外配置
withCredentials，但 JSONP 本身不支持该能力）
