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 请求，下面我们来看第二种方案，也是目前主流的跨域解决方案，划重点！😁

注意：本文归作者所有，未经作者允许，不得转载