问题描述:
本地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