跨域请求指的是从一个域加载资源时，该请求被另一个域所阻止的情况。这通常是由浏览器的同源策略引起的，它旨在防止恶意脚本访问敏感数据。
JSONP (JSON with Padding) 是一种聪明的技术，它利用了JSON和<script>元素的特性来绕过同源策略限制。它允许客户端脚本向另一个域发出请求，并接收JSON格式的响应。
JSONP的工作原理：
- 客户端脚本生成一个唯一的回调函数名（例如：
myCallback）。 - 客户端脚本创建
<script>元素，并将其src属性设置为JSONP端点URL，该URL包含以下参数：- 回调函数名
- 要请求的数据
- 服务器接收到请求后，将数据包装在一个回调函数调用中，并将其返回给客户端。
- 客户端脚本将JSON响应传递给指定的回调函数。
演示代码：
客户端脚本：
// 生成唯一的回调函数名
var callbackName = "myCallback" + Math.random();
// 创建`<script>`元素
var script = document.createElement("script");
script.src = "https://example.com/jsonp-endpoint.php?callback=" + callbackName + "&data=my-data";
// 将`<script>`元素添加到文档中
document.head.appendChild(script);
// 回调函数
window[callbackName] = function(data) {
// 处理JSON响应
console.log(data);
};服务器端代码（PHP）：
// 获取回调函数名和数据
$callback = $_GET["callback"];
$data = $_GET["data"];
// 包装JSON响应
$response = $callback . "(" . json_encode($data) . ");";
// 输出响应
echo $response;优点：
- 无需更改服务器端代码
- 简单易用
- 与大多数浏览器兼容
缺点：
- 只能用于GET请求
- 响应的内容类型只能是JSON格式
- 可能存在安全风险
安全注意事项：
确保只从可信来源加载JSONP响应。恶意网站可以利用JSONP注入恶意脚本。
结论：
JSONP是一种强大的跨域请求解决方案，允许你突破浏览器的同源策略限制。通过遵循本指南中的步骤，你可以轻松实现跨域数据请求，并解锁新的Web开发可能性。
