大家好，我是前端西瓜哥。今天讲 JSONP。
JSONP，是 JSON with Padding 的缩写，字面上的意思就是 “填充 JSON”。JSONP 是解决跨域请求的一种方案，我们先了解下跨域请求是什么。
跨域
浏览器在跨域发送 Ajax/fetch 请求时，会触发浏览器的同源策略，导致请求失败。
只要协议、域名、端口有一个不同，那浏览器就会认为是跨域。比如你在 a.com 下通过 Ajax 请求 b.com/api/book，默认情况下就被浏览器拦截，导致无法获得返回数据。
具体跨域的知识点，可以看我的这篇文章《为什么浏览器不能跨域发送 ajax 请求？》
JSONP 怎么跨域？
既然 Ajax 不能发送跨域请求，那我们不用 Ajax，改用 script 标签。
HTML 下的 script 标签会指向一个脚本地址，这个地址允许跨域，浏览器会加载这个脚本然后执行。
除了 script 标签， link、img 等标签的请求也是允许跨域的。
下面以通过用户 id 获取用户信息为例。
前端实现
在 script 标签的 src 上，我们指定好需要服务器进行填充的回调函数名 setUser，并带上用户 id。
<script src="http://b.com:4000/user?id=2&callback=setUser"></script>上面这种直接这样写到 HTML 里不太灵活，我们改写成下面这样。
let user = null;
function setUser(user) {
// 保存用户信息
window.user = user;
// 输出到页面上，看看效果。
document.body.append(
JSON.stringify(user);
);
}
function getUserById(id) {
const script = document.createElement('script');
script.src = `http://b.com:4000/user?id=${id}&callback=setUser`;
document.body.appendChild(script);
}
document.querySelector('button').onclick = function() {
getUserById(2);
}
后端实现
然后是服务端的处理，这里我用了 Nodejs 的 Express 框架。
const app = express();
// ...
const map = {
1: { name: 'fe_watermelon' },
2: { name: '前端西瓜哥' }
};
// 例子：/user?id=2&callback=setUser
app.get('/user', (req, res, next) => {
const { id, callback } = req.query;
res.send(`${callback}(${JSON.stringify(map[id])})`);
});
// ...服务端从 url 的请求字段中提取出 id ，找到对应的用户信息（通常为 JSON 的形式），配合要填充的回调函数 setUser，组装成字符串 setUser({"name":"前端西瓜哥"})
这个内容会作为脚本内容返回给前端，前端运行这个脚本后，就会执行全局作用域下的 setUser 函数，这个函数还会拿到用户信息，将其保存下来。
演示效果
结尾
JSONP 是一种解决跨域的方案，但一般比较少用到。
因为 JSONP 并不是标准，也不安全，服务端代码没写好会有代码注入的风险，且无法防范跨站请求伪造（CSRF）攻击。
我们也注意到要兜住返回的数据，必须定义一个全局的函数，在如今主流的模块化（变量隔离在各个模块中不暴露到全局）写法下有点格格不入。
我是前端西瓜哥，喜欢写技术文章，欢迎关注我。
相关文章，
HTTP 头字段 Origin、Host 和 Referer 有什么区别？
关注公众号，后台回复 「字节」，即可获得字节前端面试资料
本文使用 文章同步助手 同步
网友评论