JSONP
这玩意儿就是利用了 `` 标签的 src 属性没有跨域限制的漏洞,让我们可以得到从其他来源动态产生的 JSON 数据。为什么叫 JSONP ?**JSONP 是 JSON with Padding 的缩写,额,至于为什么叫这个名字,我网上找了下也没个标准的解释,还望评论区的各位老哥知道的赶紧告诉我: )**怎么实现 ?具体实现思路大致分为以下步骤:
- 本站的脚本创建一个 元素,src 地址指向跨域请求数据的服务器
- 提供一个回调函数来接受数据,函数名可以通过地址参数传递进行约定
- 服务器收到请求后,返回一个包装了 JSON 数据的响应字符串,类似这样:callback({...})
浏览器接受响应后就会去执行回调函数 callback,传递解析后的 JSON 对象作为参数,这样我们就可以在 callback 里处理数据了。实际开发中,会遇到回调函数名相同的情况,可以简单封装一个 JSONP 函数:
function jsonp({ url, params, callback }) {
return new Promise((resolve, reject) => {
// 创建一个临时的 script 标签用于发起请求
const script = document.createElement('script');
// 将回调函数临时绑定到 window 对象,回调函数执行完成后,移除 script 标签
window[callback] = data => {
resolve(data);
document.body.removeChild(script);
};
// 构造 GET 请求参数,key=value&callback=callback
const formatParams = { ...params, callback };
const requestParams = Object.keys(formatParams)
.reduce((acc, cur) => {
return acc.concat([`${cur}=${formatParams[cur]}`]);
}, [])
.join('&');
// 构造 GET 请求的 url 地址
const src = `${url}?${requestParams}`;
script.setAttribute('src', src);
document.body.appendChild(script);
});
}
// 调用时
jsonp({
url: 'https://xxx.xxx',
params: {...},
callback: 'func',
})
我们用 Promise 封装了请求,使异步回调更加优雅,但是别看楼上的洋洋洒洒写了一大段,其实本质上就是:
想要看例子 ?JSONP 的优点是简单而且兼容性很好,但是缺点也很明显,需要服务器支持而且只支持 GET 请求,下面我们来看第二种方案,也是目前主流的跨域解决方案,划重点!😁
注意:本文归作者所有,未经作者允许,不得转载