在vue项目中，往往需要使用到axios的请求拦截器，在其中可以实现对环境的判断以及拼接正确的url地址，如下：

场景重现

// http.js
// 请求拦截
axios.interceptors.request.use(
    config => {
        if (process.env.NODE_ENV === 'development') {
            config.url = 'http://xxx.xx.xx.xxx:8080'+config.url;
        } else if (process.env.NODE_ENV === 'production') {
            // config.url = getUrl() + config.url; // 线上打包地址
        }
        return config
    },
    error => {
        return Promise.reject(error)
    }
)
// 响应拦截
axios.interceptors.response.use(
  response => {
    return response
  },
  error => {
      console.log(error)
      ElMessage.error('请求失败，请检查网络!')
  }
)

// 封装get方法
export function get(url, params){
    return new Promise((resolve, reject) =>{
        axios.get(url, {
            params: params
        }).then(res => {
            resolve(res.data);
        }).catch(err =>{
            reject(err.data)
        })
});}

使用的时候，在api.js中

import { get } from './http'

export const listSource = params => get('/frame/prediction/listSource', params)

以上方法是在vue项目中常用的封装方法，但是后来在使用的过程中，发现一个奇怪的问题，在调用不同接口时，只有url的传参不同，有的接口可以正常调用，有的接口无法正常调用。
表现为：network中没有调用记录，响应拦截器中直接报“请求失败，请检查网络”

经过多方排查，一度怀疑是vue请求拦截器本身有问题，经过不懈的尝试，最后锁定在url的拼接的结果上，但是通过在请求拦截器中对config.url的打印结果看，打印结果也正常。
最后，尝试在拦截器外对axios.defaults.baseURL进行重新赋值，如

axios.defaults.baseURL = 'http://xxx.xx.xx.xxx:8080'
// 请求拦截
axios.interceptors.request.use(
    config => {
        if (process.env.NODE_ENV === 'development') {
            // config.url = 'http://xxx.xx.xx.xxx:8080'+config.url;
        } else if (process.env.NODE_ENV === 'production') {
            // config.url = getUrl() + config.url; // 线上打包地址
        }
        return config
    },
    error => {
        return Promise.reject(error)
    }
)

此时，listSource接口在network中终于有了表现，也终于发现了问题所在

划重点

由上图可以看出，url中出现了很多不应该出现的字符，通过百度后才得知，是因为我复制的url中带了空白url编码%E2%80%8B，空白编码没有宽度，虽然看不到但是会影响结果无法正确匹配url，醍醐灌顶！！！！
解决办法：把复制的url删除掉（连带引号），自己重新手打一遍