手动创建script解决跨域问题（jsonp从入门到放弃）

vue项目一般用axios代替jQuery发送ajax请求，但是不支持jsonp格式，需要安装jsonp的依赖包，这就很不爽了，能自己轻易实现的，为什么要引乱七八糟的插件。jsonp其实就是利用<script>标签没有跨域限制的“漏洞”（历史遗迹啊）来达到与第三方通讯的目的。

那我就直接自己创建script就好了，还用你jsonp干什么。生死看淡，那就试试呗；

mounted是vue的生命周期中的钩子，用其他库开发的，直接用mounted内的部分即可。

    mounted(){
        //axios不支持jsonp，就直接用创建js解决跨域问题
        const script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = 'http://api.map.baidu.com/location/ip?coor=bd09ll&ak=zdID84p3fMRLNHzegSlgSbe9';
        document.body.appendChild(script);
    }

上文的代码看起来没错，但是报错了

Uncaught SyntaxError: Unexpected token :

因为该script的内容为{},前后均无分号；script.src添加个  callback=null  ，就不报错了

script.src = 'http://api.map.baidu.com/location/ip?callback=null&coor=bd09ll&ak=zdID84p3fMRLNHzegSlgSbe9';

 那么又有个新问题，我跨域请求来的数据怎么保存下来，没错就是用callback调用函数

mounted(){
        //axios不支持jsonp，就直接用创建js解决跨域问题
        const script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = 'http://api.map.baidu.com/location/ip?callback=show&coor=bd09ll&ak=zdID84p3fMRLNHzegSlgSbe9';
        document.body.appendChild(script);
        window.show = function (json) {//不添加window，callback找不到
         console.log(json)
        }
    },

关于回调函数要强调的是，不添加window，callback是找不到的，因为callback的this是window，mounted中函数的this是vue实例。

今天要分享的就是这些，啦啦啦，晚上回学校领毕业证去。我的大学接近尾声了。

 

转载于:https://www.cnblogs.com/cjh1111/p/7028144.html