JSONP方式解决跨域

<script>
    // 封装一个jsonp函数
    function jsonp({url, params, callback}) {
        return new Promise((resolve, reject) => {
            // 定义回调函数
            window[callback] = function(data) {
                resolve(data)
            }
          
            const script = document.createElement('script') // 创建script标签
            params = {...params, callback}
            const arr = []
            for(const key in params) {
                if(params.hasOwnProperty(key)) { // 判断当前key是否是params对象自身的属性，有可能会是原型上的属性，所以需要判断一下
                    arr.push(`${key}=${params[key]}`)
                }
            }
            url += `?${arr.join('&')}` // 拼接参数
            script.async = true
            script.src = url
            document.body.appendChild(script)
            script.onload = () => {
                document.body.removeChild(script)
            }
        })
    }
    // 使用jsonp
    jsonp({
        url: 'http://127.0.0.1:8081/hello',
        params:{id: '1'},
        callback: 'hello'
    }).then(res => {
        console.log('res:', res)
    })
</script>

其中8080为服务器端口

JSONP的实现原理：由于浏览器收同源策略的限制，网页无法通过Ajax请求非同源的接口数据，但是script标签不受浏览器同源策略的影响，可以通过src属性请求非同源js脚本。简而言之，JSONP的实现原理就是通过<script>标签的src属性，请求跨域的数据接口，并通过函数调用的形式，接收跨域接口响应回来的数据。

通过如下代码可以说明所有的script标签都是共享内容的

<body>
    <script>
        function success(res) {
            console.log(res);
        }
    </script>
    <script>
        var data = {
            name: 'zs',
            age: 20
        };
        success(data);
    </script>
</body>