vue配置代理后，接口请求的Host和Referer都是同一个地址？

Question

vue.config.js:

` proxy: {

  "/api": {
    //目标接口域名
    target: VUE_APP_URL ,
    ws: true, // 是否启用websockets
    changOrigin: true, //开启代理
    pathRewrite: {
      "^/api": "" //重写接口,后面可以使重写的新路径，一般不做更改
    }
  }
}`

axios.js:

if (process.env.NODE_ENV === "development") {
axios.defaults.baseURL = "/api";
}

如上配置后，接口地址变为了：http://localhost:8080/structure/login/index这种的。但是报404错误。检查接口的请求头时，发现：

1. Host:

   localhost:8080

2. Referer:

   http://localhost:8080/

   这是什么原因?是正常的吗？
   当我直接在浏览器中输入："http://dashboard.xxxx.com/structure/login/index"的时候，他能直接跳转到后台首页,说明接口地址是能够访问到的（"http://dashboard.xxxx.com"这个是我代理的真实接口地址）。代理后反而报404错误。
   我快要疯了都。怎么解决啊

   eq:当我直接在axios.js中将axios.defaults.baseURL = "http://dashboard.xxxx.com";的时候，接口又报跨域错误

Answer 1

vue.config.js:

devServer: {
    proxy: {
      "/api": {
        //目标接口域名
        target: "http://dashboard.xxxx.com",
        ws: true, // 是否启用websockets
        changOrigin: true, //开启代理
        pathRewrite: {
          "^/api": "" //重写接口,后面可以使重写的新路径，一般不做更改
        }
      }
    }
  }