简单讲一讲通过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