跨域请求讲解大全

先分享一篇优秀博文：跨域实现大全

一、JSONP方案

1.封装jsonp.js(单独创建js文件时，里面的script标签就不要了）

客户端代码

<script>
    function jsonp(options) {
        // 1 动态的创建一个script标签
        const script = document.createElement('script');
        // 用于拼接请求参数的变量
        let params = '';

for (let attr in options.data) {
            params += '&' + attr + '=' + options.data[attr];
        }
        // myjsonp后面生成随机数字 为了解决兼容IE缓存问题
        let fnName = 'myJsonp' + Math.random().toString().replace('.', '');
        // 让它变成一个全局函数！
        // 现在的函数已经变成了一个匿名函数了，所以名字变成了一个亟待解决的问题!
        window[fnName] = options.success;
        // 为script标签添加src属性
        script.src = options.url + '?callback=' + fnName + params;
        // 将script标签追加到页面当中
        document.body.appendChild(script);
        // 给script标签添加onload事件， 当script标签被加载完成的时候删除标签！
        script.onload = function () {
            document.body.removeChild(script);
        }
    } 
</script>

服务端代码

app.get('/better', (req, res) => {
    // 接收客户端传递过来的函数名称
    // const fnName = req.query.callback;
    // 将函数名称对应的函数调用代码返回给客户端！
    // const data = JSON.stringify([{name: "lvhang"},{test: "如果你能看到这条消息，说明你已经解决了同源的问题!你用的或许是jsonph or CROS但是，这已经不重要了！"}]);
    // const result = fnName + '(' + data + ')';
    // setTimeout( () => {
    // }, 1000)
    // res.send(result)

        // 在jsonp的内部就是干的上面的事情！
    res.jsonp({name: 'lvchengxin', age: 20})
})

2.调用示例

<script type="text/javascript">
    const btn = document.getElementById('btn');
    btn.onclick = function () {
        jsonp({
        // 请求地址
        url: 'http://localhost:3001/better',
        // 请求参数
        data: {
            name: 'lvchengxin',
            age: 20
        },
         // 请求成功后的回调函数
        success: function (data, succ) {
            console.log(data, succ)
        }
    })
    }
</script>