JSONP是一种利用<script>标签绕过同源策略的跨域方案，仅支持GET请求，需服务端返回函数调用格式数据，前端预定义回调函数，存在XSS风险，仅适用于可信接口。
JSONP 是一种针对老旧浏览器设计的跨域方案，它不依赖现代标准，而是利用 <script> 标签天然不受同源策略限制的特性来“绕过”限制。虽然现在基本被 CORS 取代，但在维护老系统、兼容 IE8/9 或对接不支持 CORS 的第三方接口时，仍可能遇到。
核心逻辑很简单：让服务端把数据包装成函数调用返回，前端提前定义好这个函数，脚本一加载就自动执行。
JSONP 只支持 GET 请求
因为本质是动态插入 <script src="...">，只能发 GET。不能传 body，也不能设自定义请求头，更没法拦截或重试失败请求。
- 服务端必须接收一个
callback参数（比如?callback=handleData） - 返回内容必须是合法 JS 代码：
handleData({"name":"张三","age":25}) - 前端必须提前挂载
handleData到window上，否则执行时报错
手动实现一个轻量 JSONP 函数
不用 jQuery，几行就能搞定：
立即学习“Java免费学习笔记（深入）”；
function jsonp({ url, success, error }) {
const cbName = 'jsonp_' + Date.now() + '_' + Math.random().toString(36).substr(2, 6);
window[cbName] = function(data) {
success && success(data);
delete window[cbName];
};
const script = document.createElement('script');
script.src = url + (url.includes('?') ? '&' : '?') + 'callback=' + cbName;
script.onerror = () => error && error('加载失败');
document.head.appendChild(script);
}调用方式：
jsonp({
url: 'http://api.example.com/data',
success: data => console.log(data),
error: msg => console.error(msg)
});后端配合要点（以 Express 为例）
关键不是返回 JSON，而是返回可执行 JS 字符串：
app.get('/data', (req, res) => {
const callback = req.query.callback;
const data = { message: 'hello', time: new Date() };
if (!callback) {
return res.status(400).send('缺少 callback 参数');
}
res.type('application/javascript');
res.send(`${callback}(${JSON.stringify(data)})`);
});注意：
- 必须检查
callback是否存在且为合法标识符（防 XSS），生产环境建议白名单校验 - 不要设置
Content-Type: application/json，那会触发浏览器解析失败 - 不能用
res.json()，得手动拼字符串
安全风险要留意
JSONP 没有请求拦截机制，一旦服务端返回恶意脚本（比如注入 eval() 或跳转代码），前端会无条件执行。所以只用于可信接口，绝不能用于用户可控的回调名。
不复杂但容易忽略
