zoukankan      html  css  js  c++  java
  • Vue中如何使用axios发送jsonp跨域验证

    https://cnodejs.org/topic/5930430f03dba3510d8a62c6

    1. 在使用axios发送请求时,服务器端设置 res.header(“Access-Control-Allow-Origin”, “*”);可以正确得到结果

    2. 当服务器端不设置允许跨域时,使用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发送跨域请求,请赐教!

    12 回复

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

    来自酷炫的 CNodeMD

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

    @cctv1005s 你看下代码

     

    解决问题的思路就有问题, 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(接口)才是稳定的,依赖于抽象而不是实现.

     

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

     

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

     

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

     
  • 相关阅读:
    mxGraph 3.7.2
    ER模型
    帮忙画个ER图_百度知道
    ER图
    Download Devart T4 Editor
    Codeuml —— 设计 UML 图表跟你编码一样快
    使用 Sublime + PlantUML 高效地画图
    Rappid Diagramming Framework
    Activiti Designer 5.15.0 发布,可视化流程设计器
    JavaScript Diagramming
  • 原文地址:https://www.cnblogs.com/zaifeng0108/p/7226476.html
Copyright © 2011-2022 走看看