zoukankan      html  css  js  c++  java
  • 手动创建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实例。

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

  • 相关阅读:
    正则判断是否为纯数值
    前后端加密解密crypto.js
    小程序使用iconfont字体图标
    LeetCode-Combination Sum II
    LeetCode-Combination Sum
    Google 2013 campus test-R1
    Google Codejam
    LeetCode-Count and Say
    LeetCode-Binary Tree Level Order Traversal II
    LeetCode-Binary Tree Level Order Traversal
  • 原文地址:https://www.cnblogs.com/cjh1111/p/7028144.html
Copyright © 2011-2022 走看看