Vue開發使用Axios遇到了大坑！技术頭條網

2020-04-21 14:39:40 安浪科技

最近在趕項目，項目需要一定基礎錄入數據，所以邊開發邊讓同事進行數據錄入，但是遇到了天坑！

我使用angular的http請求，局域網內連接開發工程，一切正常！

使用Vue的axios連接部分正常，部分不正常，服務器狀態碼200，服務器端控制檯也不報錯。但是頁面請求就是報錯。使用iPhone手機報錯，換華為安卓手機也是一樣的報錯，安卓手機不知道怎麼調試，使用macOS的Safari瀏覽器可以調試iPhone手機瀏覽器，調試報錯，但是不知道原因。就單純報錯，服務器是沒有任何問題。錯誤代碼是200。

也就是說，我PC版本瀏覽器縮放成手機瀏覽器一切正常，真機報錯，如果說是ssl證書等攔截，但實際上是有的請求報錯有的請求不報錯，一般報錯的是服務器返回一定數據的頁面會報錯。

換成局域網其它PC電腦訪問，很多頁面正常，部分頁面異步請求不正常，所有的http請求都統一在一個axios工具裡封裝的。為何有些報錯，有些不報錯呢？太奇怪了唉。

但是在我工程開發的本機一切全部都正常！比如區域數據加載，數據為全雲南省行政區數據，在我本機請求正常，但局域網其它瀏覽器訪問就網絡請求報錯，控制檯顯示為incomplete encoding？

但是編碼都是utf-8完全和其它請求和返回一致。我本機也可以正常加載，更離奇的是，打包成生產模式部署到阿里雲服務器上也全部正常，就局域網跨電腦訪問就異常，也不是全部異常，就是那麼部分接口異常。

使用的代碼為ant design vue pro後臺管理模板預設的axios封裝，代碼如下：

<code>import Vue from 'vue'
import axios from 'axios'
import store from '@/store'
import notification from 'ant-design-vue/es/notification'
import { VueAxios } from './vueAxios'
import { ACCESS_TOKEN, ENTERPRISE_TOKEN } from '@/store/mutation-types'
import Constant from '@/config/ann.config'

// 創建 axios 實例
const service = axios.create({
  baseURL: Constant.API_URL, // api base_url
  timeout: 6000 // 請求超時時間
})

const err = (error) => {
  if (error.response) {
    const data = error.response.data
    const token = Vue.ls.get(ACCESS_TOKEN)
    if (error.response.status === 403) {
      notification.error({
        message: 'Forbidden',
        description: data.message
      })
    }
    if (error.response.status === 401 && !(data.result && data.result.isLogin)) {
      notification.error({
        message: 'Unauthorized',
        description: 'Authorization verification failed'
      })
      if (token) {
        store.dispatch('Logout').then(() => {
          setTimeout(() => {
            window.location.reload()
          }, 1500)
        })
      }
    }
  }
  return Promise.reject(error)
}

// request interceptor
service.interceptors.request.use(config => { 

  // 登錄用戶身份認證Token
  const token = Vue.ls.get(ACCESS_TOKEN)
  if (token) {
    config.headers['Ann-Token'] = token // 讓每個請求攜帶自定義 token 請根據實際情況自行修改
  }
  // 當前操作企業授權Token
  const tokenE = Vue.ls.get(ENTERPRISE_TOKEN)
  if (tokenE) {
    config.headers['Ann-E-Token'] = tokenE // 讓每個請求攜帶自定義 token 請根據實際情況自行修改
  }
  return config
}, err)

// response interceptor
service.interceptors.response.use((response) => {
  return response.data
}, err)

const installer = {
  vm: {},
  install (Vue) {
    Vue.use(VueAxios, service)
  }
}

export {
  installer as VueAxios,
  service as axiosService
}
/<code>