JSONP跨域请求秘诀：面试满分攻略ヾ(≧▽≦*)o

前端

2024-01-22 18:31:09

引子

JSONP请求，跨域请求中的妙招，在面试中，它可是面试官眼中的香饽饽。今天，我们就来深入剖析JSONP请求，助你面试满分。

JSONP的本质

JSONP的全称是JSON with Padding，本质上它是一种通过客户端script标签发出的请求方式，可以绕过同源策略限制，实现跨域数据获取。

同源策略的限制

为了保证浏览器的安全性，同源策略限制了不同源下的页面进行交互。所谓同源，是指协议、域名、端口号完全相同的页面。跨越同源限制，就需要用到跨域技术，如JSONP。

JSONP的运作机制

JSONP请求的运作原理非常简单：

客户端创建<script>标签，向目标服务器发送请求。
服务器接收到请求后，返回一段包含JSONP回调函数的代码。
客户端接收到返回的代码后，执行回调函数，并处理服务器返回的数据。

JSONP请求的好处

跨域： JSONP可以跨越同源策略的限制，实现不同源下的数据获取。
简单： JSONP请求使用script标签，实现简单，不需要额外的配置或插件。
广泛支持： JSONP得到所有主流浏览器的支持，兼容性非常好。

JSONP请求的注意事项

回调函数命名： JSONP回调函数的名称由客户端指定，需要与服务器返回的代码中一致。
安全性： JSONP请求容易受到JSONP劫持攻击，需要在服务器端进行校验和过滤。
数据类型： JSONP只能返回JSON格式的数据，不适合返回复杂的数据类型。

面试满分答案

面试官： 什么是JSONP请求？

回答： JSONP是一种通过客户端script标签发出的请求方式，可以绕过同源策略限制，实现跨域数据获取。

面试官： JSONP的运作机制是什么？

回答： 客户端发送<script>标签请求，服务器返回包含JSONP回调函数的代码，客户端执行回调函数处理数据。

面试官： JSONP请求的好处和注意事项有哪些？

回答： 好处：跨域、简单、广泛支持；注意事项：回调函数命名、安全性、数据类型限制。

示例代码

// 客户端代码
var callback = function(data) {
  // 处理服务器返回的数据
};

var script = document.createElement('script');
script.src = 'https://example.com/api?callback=' + callback;
document.body.appendChild(script);

// 服务器端代码
<?php
$callback = $_GET['callback'];

// 查询数据
$data = ['name' => 'John Doe'];

// 返回 JSONP 响应
echo $callback . '(' . json_encode($data) . ');';
?>