PHP 实现 JSONP 跨域请求的原理与代码示例

JSONP 跨域原理

浏览器的同源策略禁止了不同源之间的脚本交互，但 HTML 中的 <script>、<img> 等标签加载资源时不受此限制。JSONP 正是利用了这一点：

1. 客户端操作：在页面中动态创建一个 <script> 元素，将其 src 属性设置为目标服务器的 URL，并附带一个回调函数名作为参数（如 ?callback=handleResponse）。
2. 服务器响应：PHP 接收该请求，提取回调函数名，将需要返回的 JSON 数据包裹在该函数调用中（例如 handleResponse({"name":"张三"})），并以文本形式返回。
3. 执行结果：浏览器接收到响应后，将其视为 JavaScript 代码执行，从而自动调用预定义的回调函数并传入数据。

需要注意的是，JSONP 仅支持 GET 请求，且存在潜在的安全风险，因此必须对回调函数名进行严格过滤。

第1步：配置 PHP 后端处理逻辑

在后端，我们需要接收请求中的回调参数，构建数据数组，并将其格式化为 JavaScript 函数调用的字符串。

• 入口：PHP 文件（如 test5.php）
• 动作：解析 $_GET['callback']，生成 JSON 数据，拼接输出。
• 关键参数：回调函数名需通过正则过滤，仅允许字母、数字和下划线。

<?php
// 获取并验证回调函数名称，防止非法字符注入
$param = isset($_GET['callback']) ? $_GET['callback'] : '';
$callback = preg_replace('/[^a-zA-Z0-9_]/', '', $param);

// 准备要返回的数据
$data = array(
    'name' => '张三',
    'age' => 23
);

// 将数据转换为 JSON 字符串
$jsonStr = json_encode($data);

// 如果未提供回调名，直接返回 JSON；否则包装为函数调用
if (empty($callback)) {
    echo $jsonStr;
} else {
    echo $callback . '(' . $jsonStr . ')';
}
?>

第2步：编写前端 JavaScript 发起请求

前端通过动态插入 <script> 标签来触发跨域请求，并定义处理返回数据的回调函数。

• 入口：HTML 页面或外部 JS 文件
• 动作：创建 script 元素，设置 src 指向 PHP 接口，挂载到 DOM 中。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>JSONP 跨域请求示例</title>
</head>
<body>
<script>
    // 定义处理响应的回调函数
    function handleResponse(data) {
        console.log('接收到的数据:', data);
        // 在此处处理业务逻辑
    }

    // 动态创建 script 标签发起 JSONP 请求
    var script = document.createElement('script');
    // 注意：URL 中的 callback 参数值必须与上面定义的函数名一致
    script.src = 'http://localhost/test5.php?callback=handleResponse';

    // 将 script 标签添加到文档中，触发请求
    if (document.body) {
        document.body.appendChild(script);
    } else {
        document.addEventListener('DOMContentLoaded', function() {
            document.body.appendChild(script);
        });
    }
</script>
</body>
</html>

完成判断与注意事项

当控制台成功输出包含“张三”和23的对象时，表示 JSONP 跨域请求成功。在实际应用中请注意：JSONP 不支持 POST 请求，且由于执行远程代码的特性，务必在后端对回调名进行白名单或正则校验，避免 XSS 攻击。现代 Web 开发中，CORS（跨域资源共享）是更推荐的跨域方案，但在兼容老旧浏览器或特定 CDN 场景下，JSONP 仍有其价值。

以上就是 PHP 利用 JSONP 实现跨域请求的详细内容，更多关于 PHP JSONP 跨域的资料请关注本站其它相关文章！