JSONP

JSONP 是一种 JSON 的使用方式, 这里的P 可以理解为 Padding 的意思.
为什么要用 JSONP 呢? 或者说 JSONP 一般会在什么地方应用呢?
先来看一个报错信息

image-error.png

这是一个经典的跨域报错, 关于跨域详看浏览器同源策略 .
此处的报错原因是 9999 端口想要访问 8080 端口的数据，违背了该策略。
JSONP 就是这样一种方式，能绕过这种策略。具体实现是利用了 script 脚本天生的跨域能力。
比如在你的页面里面引入这个脚本 https://cdn.bootcss.com/lodash.js/4.17.15/lodash.core.min.js 只要你的浏览器允许 js 脚本运行就行。因为所有的脚本的引入都是 get 的方式，所以注定了 JSONP 的请求只能是 get 请求.
具体是怎么应用的呢?
首先是前端

axios({
    url: "http://localhost:8080/getJson"
  }).then(res => {
})

这是我们正常请求时候的代码，因为跨域，所以我们就不能这么用了。

/getJson 这个接口返回的数据应该是这样的

{"url": "login"}

写一个全局的JSONP处理方法

window.JSON_P = function (res) {
  console.log(res)
  //
}

调用 JSONP 脚本

<script src="http://localhost:8080/getJson?callback=JSON_P"></script>

后端
后端接收到 script 脚本之后会解析将你定义的全局方法解析出来，然后将数据包进方法里面返回

JSON_P&&JSON_P({"url": "login"})

其实这里可以看出来：后端返回的 script 脚本内容其实是一个巨大的函数调用，调用的参数就是我们需要的数据。外层包裹方法相当于 JSONP 里面的 P，函数的名字是通过脚本的 query 查找的，算是前后端的一种约定方式。
因为我们的方法是写到全局里面的，所以这个脚本一旦插入到页面里面就相当于执行了该方法，在方法的执行里面我们就能对数据进行操作了~

注意 JSONP 不是 Ajax 调用，在 Chrome 浏览器 Network 面板的 XHR 无法看到，要在 JS 里面查看

image.png

JSONP

推荐阅读更多精彩内容