JSONP是一种利用<script>标签绕过同源策略的伪Ajax方案，通过动态创建script标签、服务端返回函数调用格式数据（如handleData({...})）实现跨域GET请求，需服务端配合且存在安全与功能局限。
JSONP 是一种利用 <script> 标签不受同源策略限制的特性，绕过跨域限制的“伪 Ajax”方案，适用于只支持 GET、且服务端配合返回特定格式数据的老旧接口。
JSONP 的核心原理
浏览器允许动态插入 <script src="https://xxx.com/api?callback=handleData"></script>，服务端收到请求后不返回纯 JSON，而是返回一段可执行的 JavaScript 代码，例如：
这段代码会自动调用前端预先定义好的函数 handleData，从而把数据传进来。本质是“借 script 标签加载远程 JS”，不是真正的 XMLHttpRequest。
手动实现一个 JSONP 请求
不需要框架，几行原生 JS 就能搞定：
立即学习“Java免费学习笔记（深入）”；
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- 动态创建
<script>元素，设置src属性，拼上接口地址和callback参数名 - 在全局挂载回调函数（如
window.handleData = function(data) { ... }） - 请求完成后，及时移除
<script>标签并清理全局函数，避免污染
示例代码：
function jsonp(url, callbackName, success) {
const script = document.createElement('script');
window[callbackName] = function(data) {
success(data);
document.head.removeChild(script);
delete window[callbackName];
};
script.src = `${url}${url.includes('?') ? '&' : '?'}callback=${callbackName}`;
document.head.appendChild(script);
}
// 使用
jsonp('https://legacy-api.example.com/user', 'myCallback', (data) => {
console.log('拿到数据：', data);
});
注意服务端必须支持 JSONP
这不是前端单方面能解决的。服务端需识别 callback 参数，并将响应体包装成函数调用形式。常见错误包括：
- 接口只返回标准 JSON（如
{"code":0,"data":{...}}），没做回调包裹 → JSONP 失败，控制台报语法错误 - 服务端校验了 Referer 或 Origin，拒绝非白名单域名的 script 请求 → 返回 403
- callback 参数名被硬编码（如只认
cb），但前端传了callback=xxx→ 服务端忽略或报错
务必和服务端确认支持的参数名（常见有 callback、cb、jsoncallback）、是否允许自定义、以及是否有域名白名单限制。
现代替代方案与局限性
JSONP 已是历史方案，仅用于无法升级的遗留系统：
- 只支持 GET，不能发 POST/PUT/DELETE
- 没有状态码、headers、超时控制、错误重试等网络能力
- 依赖全局函数，易冲突；script 加载失败难捕获（只能靠定时器 fallback）
- 存在 XSS 风险（执行任意远程 JS），服务端必须严格过滤 callback 参数值（只允许字母数字下划线）
如果服务端可配合，优先推动其启用 CORS；若完全不可控，JSONP 是唯一可行的老接口兜底方式。
