简单讲一讲通过JSONP的方式来跨域读取数据
在了解跨域之前应该先了解下：

1995年，由 Netscape 公司引入浏览器的 同源政策 。 目前，所有浏览器都实行这个政策。
同源政策的目的，是为了保证用户信息的安全，防止恶意的网站窃取数据。

所谓同源是指 协议相同，域名相同，端口相同
而只要有其一不同，就发生了跨域，如果跨域了，共有三种行为受到限制。

（1） Cookie、LocalStorage 和 IndexDB 无法读取。

（2） DOM 无法获得。

（3） AJAX 请求不能发送。

而有时又确实需要跨域读取数据，除了架设服务器代理（浏览器请求同源服务器，再由后者请求外部服务），有三种方法规避这个限制。

JSONP
WebSocket
CORS

这里只讲JSONP

JSONP简单来说是利用了<script>标签可以跨域获取js文件来读取数据的技术，
举个栗子，假设服务端（IP:111.111.111.111)下的data.js文件代码是这样子的

callback([{
    name : '张三',
    index: 0
}, {
    name : '李四',
    index: 1
}]);

这时候客户端（IP:222.222.222.222）想要获取这里面的json数据，
可以通过动态添加script标签，并且定义callback函数来对json数据进行操作
比如：

function callback(data) {
    for(i of data){
        console.log(i.name+'  '+i.index);
    };
};
let s = document.createElement('script');
s.src = 'http://111.111.111.111/data.js';
document.body.appendChild(s);

运行结果：

张三  0
李四  1

参考链接：
https://www.jianshu.com/p/e8714fa25137
https://www.cnblogs.com/grimm/p/8339833.html