JSONP（JSON with Padding）是一种绕过浏览器同源策略限制、实现跨域数据请求的“hack”式方案。其核心原理和流程如下：
-
同源策略限制
浏览器为了安全，只允许页面从与当前页面相同协议、域名、端口的服务器加载数据。而<script>、<img>、<link>等标签对跨域不受同源策略限制——只要目标资源返回有效内容，浏览器就会加载并执行。 -
利用
<script>标签跨域
JSONP 利用该特性：前端通过动态创建一个<script>标签，设置其src属性指向目标跨域接口，并带上一个回调函数名参数，比如：<script> function handle(data) { console.log('服务器返回的数据：', data); } var script = document.createElement('script'); script.src = 'https://api.example.com/data?callback=handle'; document.head.appendChild(script); </script> -
服务器端“打包”返回
服务器接收到请求后，不是直接返回纯 JSON，而是把 JSON 数据“包裹”（padding）在指定的回调函数调用里，例如：handle({ "name": "Alice", "age": 30 });浏览器加载这个脚本时，就会立即执行
handle(...)，把数据当作参数传入页面上事先定义好的回调函数。 -
流程图示
- 页面定义全局回调函数
handle。 - 页面动态插入
<script src="...callback=handle">。 - 浏览器向跨域服务器发送 GET 请求。
- 服务器将 JSON 数据封装成
handle(JSON)格式的脚本返回。 - 浏览器下载并执行该脚本，触发全局回调函数，拿到数据。
- 页面定义全局回调函数
-
优缺点
- 优点
- 简单，无需 CORS 支持即可跨域请求 GET 接口。
- 缺点
- 仅支持 GET 请求，不支持 POST、PUT 等。
- 安全性较差，容易受到 XSS 攻击（调用任意脚本）。
- 回调地狱：多个并发请求时需要管理不同回调名。
- 优点
-
现代替代
随着 CORS（跨域资源共享）和fetch/XMLHttpRequest支持跨域请求，JSONP 已被逐步淘汰，仅在极少数不支持 CORS 的老旧环境下使用。
示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JSONP 示例</title>
<script>
// 全局回调函数
function jsonpCallback(data) {
document.getElementById('output').textContent =
'Hello, ' + data.name + '，你 ' + data.age + ' 岁了！';
}
// 动态加载 JSONP 脚本
function loadData() {
const script = document.createElement('script');
script.src = 'https://api.example.com/user?callback=jsonpCallback';
document.head.appendChild(script);
}
</script>
</head>
<body>
<button onclick="loadData()">获取用户信息</button>
<div id="output"></div>
</body>
</html>
上述例子中，当点击按钮时，会向 https://api.example.com/user?callback=jsonpCallback 发起跨域请求，服务器返回：
jsonpCallback({ "name": "Bob", "age": 25 });
浏览器执行该脚本，直接调用页面上的 jsonpCallback，完成数据读取和展示。
![[yolov11改进系列]基于yolov11引入自注意力与卷积混合模块ACmix提高FPS+检测效率python源码+训练源码](https://i-blog.csdnimg.cn/direct/2381f3b5816a4edb83b74966be0cfa93.jpeg)
![[7-1] ADC模数转换器 江协科技学习笔记（14个知识点）](https://i-blog.csdnimg.cn/direct/0865a457639e4c3caede3c040227d159.png)
