Vue中如何使用axios发送jsonp跨域验证
Posted 金在峰
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue中如何使用axios发送jsonp跨域验证相关的知识，希望对你有一定的参考价值。
https://cnodejs.org/topic/5930430f03dba3510d8a62c6
-
在使用axios发送请求时，服务器端设置 res.header(“Access-Control-Allow-Origin”, “*”);可以正确得到结果
-
当服务器端不设置允许跨域时，使用jsonp方式发送就不行了，提示错误如下
XMLHttpRequest cannot load http://localhost:3000/axios?cb=cb. No ‘Access-Control-Allow-Origin‘ header is present on the requested resource. Origin ‘null‘ is therefore not allowed access.
那个小伙伴在Vue中使用axios发送跨域请求，请赐教！
// 继承
Vue.prototype.$http = axios;
// 实例化
var vm = new Vue({
el : ‘#box‘,
data : {
},
created:function(){
// console.log(111);
this.hello();
},
methods : {
hello : function(){
this.$http.get(‘http://localhost:3000/axios?cb=cb‘,{
// withCredentials:true
}).then(function(data,msg){
console.log(data);
console.log(msg);
}).catch(function(err){
console.log(err);
})
}
}
})
解决问题的思路就有问题, jsonp关vue什么事? 找axios去: https://github.com/mzabriskie/axios/blob/master/COOKBOOK.md#jsonp 最后说几点: 1.jsonp一样需要服务端支持,为什么不用cors呢? 2.不建议将ajax和vue绑定在一起, 3.我是用swagger代码生成模板将所有ajax封装了一层promise,屏蔽掉ajax调用过程,只有promise(接口)才是稳定的,依赖于抽象而不是实现.
@justbecoder vue官方推荐axios是因为它是一个优良的ajax库,而不是说它就应该和vue绑定在一起,vue-resource的一些奇怪的约定事实上没有带来任何好处, vue和axios没有任何关联性和排斥性,应该尽量保持职责分离,
@justbecoder axios不支持jsonp,这是官方的明确表态,如果非要用jsonp,那就不要用它.
而且想一想,如果你们后期需要将jsonp升级成cors,那是不是要到处改代码, 但如果你封装成promise后,则可以一次性统一替换promise里面的具体实现,
这就是为什么软件开发应该依赖抽象而不是具体
搞后端的,这应该是入门级思想,但在前端,这方面很多人都认知不足.
JSONP本质上是为浏览器添加一个script标签，因为script里面的src可以不考虑跨域的问题。 因为axios是不支持jsonp的，所以如果你在不使用jquery的ajax的情况下，你是可以考虑自己封装一个的，也不麻烦，就像这样。
<!DOCTYPE html>
<html>
<head>
<title>测试</title>
<meta charset="utf-8" />
</head>
<body>
<script type="text/javascript">
//百度suggets api
var s = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=132&json=1";
var fetchJsonp = function(url){
var body = document.getElementsByTagName(‘body‘)[0];
//插入一个script
var script = document.createElement(‘script‘);
script.setAttribute(‘src‘,url);
body.appendChild(script);
}
//为了符合百度查询api而建立的一个对象
window.baidu = {};
//script载入完之后会调用这个函数，sug就是suggest的内容
window.baidu.sug = function(sug){
console.log(sug);
}
//调用
fetchJsonp(s);
</script>
</body>
</html>这个是我调用百度的suggest的接口实现的，非常简单。
以上是关于Vue中如何使用axios发送jsonp跨域验证的主要内容，如果未能解决你的问题，请参考以下文章