Vue项目devServer.proxy

vue项目的前后端不在同一个服务器的话，需要对前端请求进行转发。

如果你的前端应用和后端 API 服务器没有运行在同一个主机上，你需要在开发环境下将 API 请求代理到 API 服务器。可以通过 *.config.js 中的 devServer.proxy 选项来配置。

我在工程中的vue.config.js文件中配置如下：

const proxy = require('http-proxy-middleware')
module.exports = {
  // webpack-dev-server 相关配置  proxy设置远程转发
  devServer: {
    proxy: 'http://10.93.184.51:8080'
  }
}

然而，启动前端以后，访问前端页面，直接超时，页面加载不出来。

排查：

1. 到后端服务器上查看是否收到了前端的请求：

   
   image.png

从访问日志中，可以看出。有一条是非127.0.0.1来源的请求，IP地址为：100.85.1.212，时间点跟我访问前端的时间点比较吻合。说明这条有可能是我的前端发起的请求。
于是查看前端服务的IP地址。

2. 前端所在的服务器的IP地址（本机）：

   
   image.png

前端服务器的IP地址为100.85.1.212，跟后端收到的请求的IP地址一致。说明前端已经将请求转发到了后端。不过从访问日志中看出，前端转发来的请求是 "/"，这个应该是错误的URI。

在前端服务器上直接访问下后端服务器的地址：

curl "http://10.93.184.51:8080"
{"msg":"请求访问：/，认证失败，无法访问系统资源","code":401}%

我擦，瞬间想起来，后端服务器收到的这条请求，是我自己手动发起的curl请求，并不是前端转发的。

再重新对比一下工程中的已有配置与现在的配置。发现工程中的已有配置，应该是将前端请求转发到了本地的127.0.0.1:8080。我只需要修改这个ip地址就行。

  devServer: {
    host: '0.0.0.0',
    port: port,
    proxy: {
      // detail: https://cli.vuejs.org/config/#devserver-proxy
      [process.env.VUE_APP_BASE_API]: {
        target: `http://10.93.184.51:8080`,
        changeOrigin: true,
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: ''
        }
      }
    },
    sockHost: 'mytest.qunar.com',
    disableHostCheck: true
  }

重新启动前端，重新从前端访问，并且实时观测后端的请求日志。

未解决，后端依然收不到请求。