记录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,但这种方法,会让后端比较麻烦,但如果跨域出现问题,尝试过很多办法后却无法解决的时候,希望可以注意到这一点.