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

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

 

责任编辑:庞桂玉 来源: 今日头条
相关推荐

2021-05-12 13:38:47

云计算

2013-07-26 09:16:13

SwiftOpenStackSwiftStack

2021-10-26 08:22:38

消息堆积扩容RocketMQ

2015-10-12 11:26:12

iOS 9适配

2019-03-25 10:30:19

开发技能代码

2021-07-28 10:13:00

公有云云计算云迁移

2015-12-22 10:10:43

2021-10-18 22:29:54

OOMJava Out Of Memo

2023-09-14 10:55:16

2021-11-17 08:24:47

Vue3 插件Vue应用

2011-12-21 15:07:28

开源云计算

2023-04-16 19:34:01

2020-08-06 15:50:26

微信无法登陆移动应用

2021-05-19 09:29:52

VueAxios异步请求

2017-10-24 12:32:03

小程序APPbug

2015-10-10 15:37:20

软件冲突OS X

2023-10-05 18:49:12

.Net​Newtonsof源码

2014-04-14 10:21:15

开发运维DevOps

2016-09-19 21:37:58

vue特效组件Web

2020-01-21 22:02:23

物联网IOT物联网应用
点赞
收藏

51CTO技术栈公众号