最近在趕項目,項目需要一定基礎(chǔ)錄入數(shù)據(jù),所以邊開發(fā)邊讓同事進(jìn)行數(shù)據(jù)錄入,但是遇到了天坑!
我使用angular的http請求,局域網(wǎng)內(nèi)連接開發(fā)工程,一切正常!
使用Vue的axios連接部分正常,部分不正常,服務(wù)器狀態(tài)碼200,服務(wù)器端控制臺也不報錯。但是頁面請求就是報錯。使用iPhone手機報錯,換華為安卓手機也是一樣的報錯,安卓手機不知道怎么調(diào)試,使用macOS的Safari瀏覽器可以調(diào)試iPhone手機瀏覽器,調(diào)試報錯,但是不知道原因。就單純報錯,服務(wù)器是沒有任何問題。錯誤代碼是200。
也就是說,我PC版本瀏覽器縮放成手機瀏覽器一切正常,真機報錯,如果說是ssl證書等攔截,但實際上是有的請求報錯有的請求不報錯,一般報錯的是服務(wù)器返回一定數(shù)據(jù)的頁面會報錯。
換成局域網(wǎng)其它PC電腦訪問,很多頁面正常,部分頁面異步請求不正常,所有的http請求都統(tǒng)一在一個axios工具里封裝的。為何有些報錯,有些不報錯呢?太奇怪了唉。
但是在我工程開發(fā)的本機一切全部都正常!比如區(qū)域數(shù)據(jù)加載,數(shù)據(jù)為全云南省行政區(qū)數(shù)據(jù),在我本機請求正常,但局域網(wǎng)其它瀏覽器訪問就網(wǎng)絡(luò)請求報錯,控制臺顯示為incomplete encoding?
但是編碼都是utf-8完全和其它請求和返回一致。我本機也可以正常加載,更離奇的是,打包成生產(chǎn)模式部署到阿里云服務(wù)器上也全部正常,就局域網(wǎng)跨電腦訪問就異常,也不是全部異常,就是那么部分接口異常。
使用的代碼為ant design vue pro后臺管理模板預(yù)設(shè)的axios封裝,代碼如下:
- 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'
- // 創(chuàng)建 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 => {
- // 登錄用戶身份認(rèn)證Token
- const token = Vue.ls.get(ACCESS_TOKEN)
- if (token) {
- config.headers['Ann-Token'] = token // 讓每個請求攜帶自定義 token 請根據(jù)實際情況自行修改
- }
- // 當(dāng)前操作企業(yè)授權(quán)Token
- const tokenE = Vue.ls.get(ENTERPRISE_TOKEN)
- if (tokenE) {
- config.headers['Ann-E-Token'] = tokenE // 讓每個請求攜帶自定義 token 請根據(jù)實際情況自行修改
- }
- 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
- }
- 有沒有遇到同樣問題的道友呢?