jsonp跨域的使用及原理

最新推荐文章于 2024-07-11 20:55:36 发布

双门洞成东日ovo

最新推荐文章于 2024-07-11 20:55:36 发布

阅读量139

点赞数

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/weixin_46077258/article/details/126660814

版权

jsonp的实现原理

        /*
        jsonp跨域原理就是通过script标签的可跨域性，拼接传递一个可编辑的函数来执行跨域请求的发送
        */
        function jsonp(url,callback){
            //创建执行函数名
            const script = document.createElement('script');
            const cb = '__jsp';
            script.src=`${url}?callback=${cb}`;
            document.body.appendChild(script);

            //给函数cb定义功能
            window[cb] = function(data){
                callback(data)
                clear()
            }
            //全部执行完毕清除节点减少消耗
            function clear(){
                document.body.removeChild(script)
                window[cb] = null
            }
        }
        jsonp('192.168.0.0.1:8000/jsonp',function(data){
            console.log(data);
        })

jsonp插件库的使用

<script>
import jsonp from 'jsonp'
export default {
    data(){
        
    },
    mounted(){},
    created(){
        jsonpGet('192.168.0.0.1/jsonp',{param:abc,name:dfg},(err,data)=>{
                console.log(data);
            })
    },
    methods(){
        function jsonpGet(url,{},callback){
            jsonp(url,{
                param:'xxx',//设置请求传递的查询字符串，默认为callback
                //第二个参数可选
                name:'aaa',//执行的函数名
            },callback(data))
        };
    },

}

</script>