JSONP（JSON with Padding） 是一种在跨域请求中解决同源策略限制的方法。由于浏览器的同源策略，通常无法直接在客户端从一个不同域的服务器获取数据。JSONP 利用了 <script> 标签的跨域特性，通过动态创建 <script> 元素来加载并执行远程脚本，从而达到在不同域间进行数据交互的目的。
JSONP 的基本原理是利用 <script> 标签不受同源策略限制的特点，通过在页面上创建一个 <script> 标签，将带有回调函数名的 URL 作为 src 属性，远程服务器返回的数据将会被包裹在该回调函数中，并在客户端执行。这样就实现了跨域数据的获取。
以下是一个简单的 JSONP 示例：
<!-- 前端页面 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JSONP Example</title>
</head>
<body>
<script>
function handleResponse(data) {
console.log('Data received:', data);
}
// 创建一个 <script> 元素
var scriptElement = document.createElement('script');
// 设置 <script> 元素的 src 属性，包括回调函数名
scriptElement.src = 'http://example.com/api/data?callback=handleResponse';
// 将 <script> 元素添加到页面中
document.body.appendChild(scriptElement);
</script>
</body>
</html>
// 服务器端返回的数据
// 注意：返回的数据将会被包裹在回调函数中
handleResponse({
message: 'Data from the server'
});
在上述例子中，通过在 URL 中包含 callback=handleResponse，服务器返回的数据将被包裹在名为 handleResponse 的回调函数中。这样，前端页面就可以通过这个回调函数处理服务器返回的数据。
需要注意的是，JSONP 的使用需要服务器端支持，服务器端返回的数据必须是一个函数调用，这个函数由客户端指定，并在客户端脚本中定义。虽然 JSONP 是一种简单有效的跨域通信方式，但也存在一些安全性方面的问题，因为它要求客户端信任并执行远程服务器返回的脚本。因此，在使用 JSONP 时，要确保请求的远程服务器是可信的。
![[JS]面试官：你的简历上写着熟悉jsonp，那你说说它的底层逻辑是怎样的？](https://ucc.alicdn.com/3mfxe2r26qbaq/developer-article1635462/20241109/ab6c62833d4349a3b910e97f27656c88.png?x-oss-process=image/resize,h_160,m_lfit)
