跨域请求的最佳选择，原生的JSONP请求方案

2023-10-19 12:00:47

揭开 JSONP 的神秘面纱：跨域请求的利器

跨域请求，犹如两国之间的边界，阻碍了浏览器访问不同域名的网站，但这并不能难倒 JSONP，它宛如一位间谍，巧妙地绕过了这一障碍，助力浏览器跨越边界，实现数据交换。

原生 JSONP 请求指南

1. 定义回调函数

想象一位信使，当数据从服务器端传来，它需要一个可以传递信息的地址，这就是回调函数。在你的 HTML 页面中定义一个，准备接收消息。

<script>
function myCallback(data) {
  // 在这里处理从服务器返回的数据
}
</script>

2. 创建 <script> 标签

现在，你需要创建一个 HTML 信使，一个 <script> 标签，它将携带回调函数的地址，前往服务器获取数据。

<script src="https://example.com/api/data.json?callback=myCallback"></script>

3. 服务器端处理

服务器端扮演着数据保管者的角色，将数据包裹成 JSONP 格式，以便浏览器信使可以理解。

<?php
$data = array('name' => 'John Doe', 'age' => 30);
echo "callback(" . json_encode($data) . ");";
?>

4. 浏览器处理

当浏览器信使收到服务器的回应，它会执行脚本，犹如解码密电一般，将数据传递给回调函数，完成跨域数据交换。

原生 JSONP 请求的要点

JSONP 操作简单，就像潜入敌国窃取情报，轻松跨越域的边界。
浏览器兼容性高，几乎所有主流浏览器都能胜任这项任务。
安全性相对可靠，因为服务器只能调用客户端指定的回调函数，就像特工只能联络特定线人。
缺点也不容忽视，无法发送自定义头部信息，就像间谍无法携带秘密武器，而且数据只能是 JSON 格式，犹如只能传递密信。

原生 JSONP 请求案例

让我们用一个实际案例来加深理解，想象你是一名间谍，需要从敌国获取情报。

<!DOCTYPE html>
<html>
<head>

</head>
<body>
  <script>
    function myCallback(data) {
      console.log(data); // { name: 'John Doe', age: 30 }
    }
  </script>
  <script src="https://example.com/api/data.json?callback=myCallback"></script>
</body>
</html>