背景

在调试vue项目时我们通常会使用proxyTable来解决跨域问题，如设置axios的baseUrl为/xxx,然后在proxyTable设置拦截/xxx再转发到真实地址去即可，这种请求网上一堆方法不再赘述。但是如果前端不止要请求我们的后台，还要请求其他IP地址时，可能会通过新建一个axios然后设置baseUrl为目标IP、端口，这样在请求这个外部IP时只可以省略IP和端口。但是这样会出现跨域问题，且无法通过proxyTable解决。

解决方法

参考了https://segmentfault.com/q/1010000014869828 里面，中原大虾的回答。他的实现代码看不懂，我就按他这个思路用自己的方法实现。

思路

proxyTable失效是由于它只会拦截启动时的ip端口下的请求如localhost:8080,而不会拦截其他ip端口。解决思路就是使用axios的拦截器，如果我们要拦截’www.baidu.com’,就在请求拦截器里拦截baseUrl为’www.baidu.com’且当前环境是调试环境（ps：因为打包后通常是用nginx反向代理或者如果是apk则没有跨域问题能直接请求，这么处理是为了方便调试）的请求然后重写baseUrl 如改为’/baidu’,这样proxyTable就能拦截’/baidu’转发到百度地址

代码

axios设置

const service =  axios.create({
  baseURL: 'https://www.baidu.com/', 
  // withCredentials: true, // send cookies when cross-domain requests
  timeout: 3000,
  withCredentials: true // request timeout
})
// request interceptor
service.interceptors.request.use(
  async config =>  {
    
    // 调试时百度地址拦截,打成apk后无跨域问题不拦截
    if (process.env.NODE_ENV == 'development' && config.baseURL =='https://www.baidu.com/'){
      config.baseURL = '/baidu';
    }

    if (config.method === 'get') {
      config.paramsSerializer = function(params) {
        return qs.stringify(params, { indices: false })
      }
    }

    return config;
  },
  error => {

    return Promise.reject(error)
  }
)

proxyTable

    proxyTable: {

      //百度请求代理
      "/baidu": {
        target: "https://www.baidu.com/",  
        changeOrigin: true, //允许跨域
        pathRewrite: {
          // 路径重写，
          "^/baidu": "/" 
        logLevel: 'debug',
      },
    }