Vue axios跨域请求解决方案

前端页面的地址

http://localhost:8080/

后端接口地址

http://localhost:3005/     

百度到的解决方案(几乎都是这样配置的)：
1、在main.js添加一下代码

import axios from 'axios'
Vue.prototype.$axios = axios
axios.defaults.baseURL = '/api'

2、对vue项目根目录下的vue.config.js进行如下配置

module.exports = {
  devServer: {
     host: 'localhost',
     port: 8080,
    https: false,
    //以上的ip和端口是我们本机的;下面为需要跨域的
    proxy: {  //配置跨域
      '/api': {
        target: 'http://localhost:3005',  //这里后台的地址模拟的;应该填写你们真实的后台接口
        ws: false,
        changOrigin: true,  //允许跨域
        pathRewrite: {
          '^/api': ''  //请求的时候使用这个api就可以
        }
      }
    }
  }
}

3、发起请求

this.$axios
      .get("/")
      .then(res => {
        console.log(res.data);
        this.tableData = res.data;
      })
      .catch(error => {
        console.log(error);
      });

但是我自己进行如下配置报了错误

Proxy error: Could not proxy request / from localhost:8080 to localhost:5000.
See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ENOTFOUND).

后来试了**释掉host和port就可以正常跨域了

module.exports = {
  devServer: {
    /*  
        注释掉下面两行
    */
    // host: 'localhost',
    // port: 8080,
    https: false,
    //以上的ip和端口是我们本机的;下面为需要跨域的
    proxy: {  //配置跨域
      '/api': {
        target: 'http://localhost:3005',  //这里后台的地址模拟的;应该填写你们真实的后台接口
        ws: false,
        changOrigin: true,  //允许跨域
        pathRewrite: {
          '^/api': ''  //请求的时候使用这个api就可以
        }
      }
    }
  }
}

然后就能正常的获取数据了

小白一枚，也搞不太懂这是为啥，希望有大牛解释一下，也避免遇到同样情况的兄弟也和我一样踩坑