跨域产生的原因

首先跨越的产生， 是因为处于信息安全的考虑，浏览器采用了“同源策略”。
只有在以下三者皆相同的情况下，才称之为同源：

1. 协议 如: http 和 https 即协议不同
2. 域名 如: google.com 和 bing.com 即域名不同
3. 端口 如: 80 和 :8080 即端口不同

如果不同源的化，则相互之间不能进行：

1. Cookie、LocalStorage 和 IndexDB 的访问
2. DOM 的获取
3. AJAX 请求

客户端和非同源的服务器之间，跨越问题的解决

方法1. 跨域是浏览器设置的限定；通过让与浏览器同源的服务器进行请求的代理, 可以访问非同源服务器；

方法2. 服务器设置 CORS , 即服务器通过设置请求头的 Access-Control-Allow-Origin 属性，通知浏览器关闭对当前页面的屏蔽屏蔽；允许数据的请求；

方法3. JSONP 方法， 同源政策没有禁止 src 属性访问外部非同源的地址，那么通过一个 src 地址即可发送一个 Get 请求。具体操作的案例如下

前端

    <!-- 响应之后的回调 -->
    <script>
        function cb(data) {
            // 数据处理
            console.log(data)
        }
        
        // 通过动态生成的方式， 生成如下标签
        // 通过 src 发送 Get 请求, 将回调函数作为地址参数
        function getData() {
            var script = document.createElement('script');
            var url = `/api/get-data?callback=cb`;
            script.src = url;
            document.getElementsByTagName('head')[0].appendChild(script); 
        }
        
        // <script src="/api/get-data?callback=cb></script>
        
        // 测试请求数据
        getData()
    </script>

后端配合

 http.get('/api/get-data', (req, res) => {
     let cb  = req.query.callback
     let response = {
        code: 200,
        mag: '请求成功',
        data: 'data ato response'
    }
     // 将响应数据和回调函数拼接成字符串，返回前端
     res.send(`cb(${JSON.stringify(response)})`)
 })

通过 get 请求拿到字符串 cb({"code":200,"mag":"请求成功","data":"data ato response"}) ， eval 之后调用了约定的回到函数 cb； 最后在回调函数进行数据处理即可。