前言

在我曾经的一篇博客中曾提到过JSONP：一文带你理解同源、跨域、JSONP、CORS。

相信大家看完就能了解到：

JSONP就是：跨域时，由于浏览器同源政策，于是请求一个js文件进行回调，回调名字可以是一个随机数，这个数以callback的参数传给后台，后台返回js后能继续执行。

同时，它的优点有：

支持IE
可以跨域

当然也有缺点：

不能像ajax那么精确，即无法获取状态码等等
不支持post，因为他是script，只能发get请求

但是这篇博客对于JSONP的讲解不是那么详细，那么接下来就继续深入了解JSONP吧。

JSONP

JSONP的全名是JSON with Padding，其实他和JSON没有任何关系。

JSON只是数据交换的一种格式，而JSONP是开发人员钻漏洞实现的一种非官方的跨域方式。

那时候的开发人员发现，浏览器虽然有同源政策拦截，但是页面上引入的不同域的js脚本却可以自由访问！

例如：在自己的页面上使用<img src="">标签来随意显示其他域上的图片。

DT9W5CO_TV%Y42IOKR$I~O5.png

注意：如果遇到CORB问题，请更改src内的url

于是，人们利用这个漏洞就很好的解决了跨域问题，即：后端返回的不是JSON格式的数据，而是js的代码，实现跨域。

那又应该如何将数据装进js格式的文件中呢？

利用callback参数(key)的方式传递给后端，接着后端返回数据时就将这个callback参数的值(value)作为函数名包裹json数据。这样返回前端的就是一段js代码。

如何使用JSONP

通过jQuery使用JSONP：

$.ajax({
  url: "https://www.baidu.com/",
  type: "get",
  dataType: "jsonp",
  data: {
    wd: "k-on"
  },
  jsonp: "cb", //回调函数参数
  jsonpCallback: "test" //回调函数值
}).then((res) => {
  console.log("ajax-res:", res);
});

继续深入JSONP

前言

JSONP

如何使用JSONP