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

时间:2022-12-05 22:40:36

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实例。

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