JSONP跨域JSONP跨域主要是利用script标签没有跨域限制的特性，这样网页就可以拿到从其他源动态产生的JSON数

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第12天，点击查看活动详情

跨域的方法有很多，本篇文章介绍下JSONP跨域。

JSONP跨域介绍

JSONP跨域主要是利用js的script标签没有跨域限制的特性，这样网页就可以拿到从其他源动态产生的JSON数据。注意，JSONP请求是需要对方的服务器支持才可以实现。

JSONP有回调函数和数据这两个部分组成。回调函数就是当响应的时候，应该在页面中调用的函数，回调函数的名字一般是在请求中指定的；而数据就是传入回调函数中的JSON数据。例如，下面就是一个JSONP请求：

https://www.baidu.com/sugrec?prod=pc&wd=%E6%88%91%E4%BB%AC&cb=show%22

JSONP的实现

下面我们来简单实现下JSONP请求的过程，大致流程如下：

首先需要声明一个回调函数，其函数名(如show)当做参数值，要传递给跨域请求数据的服务器，函数形参为服务器返回的data。
然后创建一个script标签，把跨域的接口地址赋值给script标签的src属性，接口地址上需要将请求参数和回调函数一起拼上去。
服务器接收到请求后，需要进行一定的处理：把传递进来的函数名和需要给你的数据拼接成一个字符串。
最后服务器把准备的数据通过HTTP协议返回给客户端，客户端再调用执行之前声明的回调函数（show），就可以返回的数据进行操作。

function jsonp({ url, params, cb }) {
  return new Promise((resolve, reject) => {
    let script = document.createElement('script');
    window[cb] = function (data) {
      resolve(data);
      document.body.removeChild(script);
    }
    const newparams = { ...params, cb }
    let arrs = [];
    for (let key in newparams) {
       arrs.push(`${key}=${newparams[key]}`);
    }
    script.src = `${url}?${arrs.join('&')}`;
    document.body.appendChild(script);
  })
}
        
        
jsonp({
  url: 'https://www.baidu.com/sugrec',
  params: { prod: 'pc', wd: 'ssss' },
  cb: 'show'
}).then(data => {
   console.log('data', data);
})

JSONP的优点是简单兼容性好，可用于解决主流浏览器的跨域数据访问。但缺点是JSONP仅支持get请求方法，具有局限性。另外，JSONP是从其他域中加载代码执行，如果其他域不安全，很可能会在响应中夹带一些恶意代码，可能会遭受XSS攻击。