记录1 -- Vue2.0 + vue-resource 实际应用中涉及到的跨域请求问题和访问拦截

前端之家收集整理的这篇文章主要介绍了记录1 -- Vue2.0 + vue-resource 实际应用中涉及到的跨域请求问题和访问拦截前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

问题描述:
本地json文件调试无误后,接入后端公开的几个接口,第一次遇到这种花样众多的错误现场,在排除前端单方面问题的可能性之后,与后端的沟通和联调.
联调是分析到底是请求出现问题还是响应出现了问题.联调过程中发现两个比较典型的问题:
(1)这些接口通过页面访问的时候都可以访问到,但是放在前端脚本里却不行(有时候会出现500错误提示)
(2)出现跨域问题($http.jsonp())和打印错误等后端能接收到前端发送的请求,也能返回数据,但是前端报错

以下是正文了--

(1)问题原因: 访问拦截

这个需要后端配置一下过滤器,我们后端使用的是SSM.
    这里参考了一篇文章
    地址如下:
    [利用SpringMVC过滤器解决vue跨域请求 ][1]  
    (http://m.blog.csdn.net/qq_33802316/article/details/75105706)

(2)问题原因-跨域
vue-resource跨域问题解决

这里我参考了很多blog,觉得还不错的先在这里列出来,感谢这些作者的分享(Thanks~):
    [frwupeng517 的BLOG][2]
    [前端跨域的方案,关于vue+node前后端分离][3]
   
 我在这里需要说的是:
 在 [frwupeng517 的BLOG][4] (http://dapengtalk.blog.51cto.com/11549574/1878907)  这个博客里面介绍的跨域请求的情形很全面,比如有常见的有两种接口:
 一种是: 'https://sug.so.360.cn/suggest?callback=suggest_so&word=v'直接暴露callback
     这种callback是后端写好,并且是jsonp默认的,所以直接就可以使用
 另一种是: ' https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=v&cb=jQuery110208886270477889466_1480905136502' 这种是自定义的callback函数,所以需要前端来手动配置.
 我参考按照作者的示例去做的时候,发现有一点小小的bug.
 比如: 
     作者使用的
     this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{wd:'v'},{jsonp: 'cb'} ) .then(
                            function(response){ //响应成功的回调函数
                                alert(response.data.s); //关键词存放在data数据的s数组里面
                            },function(response){ //响应失败的回调函数
                                alert(response.status)
                            }
                    )
     需要改成以下代码才会得到数据:
      this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
          params: {wd: 'v'},jsonp: 'cb'
        }).then(res => {
          console.log(res.data)
        },res => {
          console.log(res)
        })
  这里的callback函数是后端来写的,将数据放到callback函数内返回即可.
  关于跨域问题还有其他的解决办法,比如webpack配置代理,这个在这篇文章中有介绍  [前端跨域的方案,关于vue+node前后端分离][5](http://www.jianshu.com/p/2f73c9c6ceb6)
     关于这个问题,我在项目中还有一种可以临时把项目走通的方法,可以应急处理或者在开发环境中使用,到最后部署的时候这个问题还是要用其他方法解决的:
     在本地搭建一个tomcat,然后将后端代码打成war包,配置在webapps中,通过tomcat访问,可以避免使用跨域.
  还需要注意一点,后端发送数据形式多为json,跨域请求中会需要将数据格式改为jsonp,但这种方法,会让后端比较麻烦,但如果跨域出现问题,尝试过很多办法后却无法解决的时候,希望可以注意到这一点.
原文链接:https://www.f2er.com/json/288781.html

猜你在找的Json相关文章