关于JSONP的介绍网上搜索一大堆，其实原理很简单，写本文其实很大原因是对自己前端学习做一个记录，同时也方便他人学习，废话不多说，下面进入正文。

JSONP正文

跨域是什么：一句话概括就是：访问不同源的资源，浏览器因为同源策略限制，无法访问不同源的资源，所谓同源就是协议，端口，域名完全相同才是同源。

非同源图片的访问

由于同源策略限制，我们无法请求不同源的数据，但是我们发现图片的src属性可以访问不同源的资源，见下图http://localhost:3000/public/build/aaa.html访问一张网络上的图片资源。

非同源script标签的访问

其实不仅图片的src可以访问不同源的数据，script标签src也可以加载不同源的数据。
下图中http://localhost:3000/public/build/aaa.html访问http://localhost:8089/static/jsonp.js资源。
下面打印出来的数据，就是上图中<script src='http://localhost:8089/static/jsonp.js'></script>执行的结果。

服务器端实现（需要了解服务器端实现看这里，不想了解的跳过。服务器端代码贴出来）

<script src='http://localhost:8089/static/jsonp.js'></script>
相当于
<script> console.log('朴宰范，中国新说唱2020') </script>

动手实现JSONP

客户端代码
服务器端代码
浏览器展示结果
客户端代码15-21行代码实际上是在dom内添加了<script src = 'http://localhost:8089/static/jsonp.js?callback=getData'></script> 去请求服务器资源，服务器解析请求的url中callback的值getData，然后执行getData()，并传入需要返回给客户端的数据'朴宰范，中国新说唱2020' ，这一波操作就相当于在dom中 <script>getData('朴宰范，中国新说唱2020')</script>
然后客户端的24-27行getData就会被执行，拿到'朴宰范，中国新说唱2020'并把数据放入p标签内展示。