Vue中如何使用axios发送jsonp跨域验证

最新推荐文章于 2024-07-15 02:33:27 发布

weixin_30952535

最新推荐文章于 2024-07-15 02:33:27 发布

阅读量1k

点赞数

文章标签： javascript 后端前端 ViewUI

原文链接：http://www.cnblogs.com/zaifeng0108/p/7226476.html

版权

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发送跨域请求，请赐教！

cctv1005s 1楼•2 个月前

把你的请求部分的代码放出来看看

来自酷炫的 CNodeMD

justbecoder 2楼•2 个月前作者

	// 继承
	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); }) } } })

justbecoder 3楼•2 个月前作者

@cctv1005s 你看下代码

178220709 4楼•2 个月前

解决问题的思路就有问题, 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 5楼•2 个月前作者

@178220709 你说的这个jsonp模块我已经实现了，感觉他和axios就没有什么关系了

justbecoder 6楼•2 个月前作者

@178220709 在vue 2.0中官方不是也推荐使用axios进行数据请求吗

178220709 7楼•2 个月前

@justbecoder vue官方推荐axios是因为它是一个优良的ajax库,而不是说它就应该和vue绑定在一起,vue-resource的一些奇怪的约定事实上没有带来任何好处, vue和axios没有任何关联性和排斥性,应该尽量保持职责分离,

178220709 8楼•2 个月前

@justbecoder axios不支持jsonp,这是官方的明确表态,如果非要用jsonp,那就不要用它.

而且想一想,如果你们后期需要将jsonp升级成cors,那是不是要到处改代码, 但如果你封装成promise后,则可以一次性统一替换promise里面的具体实现,

这就是为什么软件开发应该依赖抽象而不是具体

搞后端的,这应该是入门级思想,但在前端,这方面很多人都认知不足.

AfterThreeYears 9楼•2 个月前

不一样吧来自牛读

chanywn 10楼•2 个月前

跨域资源共享（CORS）

https://blog.codefun.cn/blog/access-control-allow-origin

http://www.ruanyifeng.com/blog/2016/04/cors.html

cctv1005s 11楼•2 个月前

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的接口实现的，非常简单。

justbecoder 12楼•2 个月前作者

@cctv1005s 3Q

转载于:https://www.cnblogs.com/zaifeng0108/p/7226476.html

weixin_30952535

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue中如何使用axios发送jsonp跨域验证

https://cnodejs.org/topic/5930430f03dba3510d8a62c6在使用axios发送请求时，服务器端设置 res.header(“Access-Control-Allow-Origin”, “*”);可以正确得到结果当服务器端不设置允许跨域时，使用jsonp方式发送就不行了，提示错误如下XMLHttpRequest ...
复制链接

扫一扫