Vue开发使用Axios遇到了大坑!

最近在赶项目,项目需要一定基础录入数据,所以边开发边让同事进行数据录入,但是遇到了天坑!

最近在赶项目,项目需要一定基础录入数据,所以边开发边让同事进行数据录入,但是遇到了天坑!

最近在赶项目,项目需要一定基础录入数据,所以边开发边让同事进行数据录入,但是遇到了天坑!

我使用angular的http请求,局域网内连接开发工程,一切正常!

Vue开发使用Axios遇到了大坑!

使用Vue的axios连接部分正常,部分不正常,服务器状态码200,服务器端控制台也不报错。但是页面请求就是报错。使用iPhone手机报错,换华为安卓手机也是一样的报错,安卓手机不知道怎么调试,使用macOS的Safari浏览器可以调试iPhone手机浏览器,调试报错,但是不知道原因。就单纯报错,服务器是没有任何问题。错误代码是200。

Vue开发使用Axios遇到了大坑!

也就是说,我PC版本浏览器缩放成手机浏览器一切正常,真机报错,如果说是ssl证书等拦截,但实际上是有的请求报错有的请求不报错,一般报错的是服务器返回一定数据的页面会报错。

换成局域网其它PC电脑访问,很多页面正常,部分页面异步请求不正常,所有的http请求都统一在一个axios工具里封装的。为何有些报错,有些不报错呢?太奇怪了唉。

但是在我工程开发的本机一切全部都正常!比如区域数据加载,数据为全云南省行政区数据,在我本机请求正常,但局域网其它浏览器访问就网络请求报错,控制台显示为incomplete encoding?

但是编码都是utf-8完全和其它请求和返回一致。我本机也可以正常加载,更离奇的是,打包成生产模式部署到阿里云服务器上也全部正常,就局域网跨电脑访问就异常,也不是全部异常,就是那么部分接口异常。

Vue开发使用Axios遇到了大坑!

使用的代码为ant design vue pro后台管理模板预设的axios封装,代码如下:

  1. importVuefrom'vue'
  2. importaxiosfrom'axios'
  3. importstorefrom'@/store'
  4. importnotificationfrom'ant-design-vue/es/notification'
  5. import{VueAxios}from'./vueAxios'
  6. import{ACCESS_TOKEN,ENTERPRISE_TOKEN}from'@/store/mutation-types'
  7. importConstantfrom'@/config/ann.config'
  8. //创建axios实例
  9. constservice=axios.create({
  10. baseURL:Constant.API_URL,//apibase_url
  11. timeout:6000//请求超时时间
  12. })
  13. consterr=(error)=>{
  14. if(error.response){
  15. constdata=error.response.data
  16. consttoken=Vue.ls.get(ACCESS_TOKEN)
  17. if(error.response.status===403){
  18. notification.error({
  19. message:'Forbidden',
  20. description:data.message
  21. })
  22. }
  23. if(error.response.status===401&&!(data.result&&data.result.isLogin)){
  24. notification.error({
  25. message:'Unauthorized',
  26. description:'Authorizationverificationfailed'
  27. })
  28. if(token){
  29. store.dispatch('Logout').then(()=>{
  30. setTimeout(()=>{
  31. window.location.reload()
  32. },1500)
  33. })
  34. }
  35. }
  36. }
  37. returnPromise.reject(error)
  38. }
  39. //requestinterceptor
  40. service.interceptors.request.use(config=>{
  41. //登录用户身份认证Token
  42. consttoken=Vue.ls.get(ACCESS_TOKEN)
  43. if(token){
  44. config.headers['Ann-Token']=token//让每个请求携带自定义token请根据实际情况自行修改
  45. }
  46. //当前操作企业授权Token
  47. consttokenE=Vue.ls.get(ENTERPRISE_TOKEN)
  48. if(tokenE){
  49. config.headers['Ann-E-Token']=tokenE//让每个请求携带自定义token请根据实际情况自行修改
  50. }
  51. returnconfig
  52. },err)
  53. //responseinterceptor
  54. service.interceptors.response.use((response)=>{
  55. returnresponse.data
  56. },err)
  57. constinstaller={
  58. vm:{},
  59. install(Vue){
  60. Vue.use(VueAxios,service)
  61. }
  62. }
  63. export{
  64. installerasVueAxios,
  65. serviceasaxiosService
  66. }
  67. 有没有遇到同样问题的道友呢?

有没有遇到同样问题的道友呢?

©本文为清一色官方代发,观点仅代表作者本人,与清一色无关。清一色对文中陈述、观点判断保持中立,不对所包含内容的准确性、可靠性或完整性提供任何明示或暗示的保证。本文不作为投资理财建议,请读者仅作参考,并请自行承担全部责任。文中部分文字/图片/视频/音频等来源于网络,如侵犯到著作权人的权利,请与我们联系(微信/QQ:1074760229)。转载请注明出处:清一色财经

(0)
打赏 微信扫码打赏 微信扫码打赏 支付宝扫码打赏 支付宝扫码打赏
清一色的头像清一色管理团队
上一篇 2023年5月5日 10:54
下一篇 2023年5月5日 10:54

相关推荐

发表评论

登录后才能评论

联系我们

在线咨询:1643011589-QQbutton

手机:13798586780

QQ/微信:1074760229

QQ群:551893940

工作时间:工作日9:00-18:00,节假日休息

关注微信