vue-cli5 proxy反代查看真实路径

一、proxy配置

1.基础配置

按照源码以及官方，配置logLevel为 ‘debug’，即可

devServer: {
    
    
    https: false,
    proxy: {
    
    
      '/container-api': {
    
    
        target: 'http://***.***.***.204:30080',
        pathRewrite: {
    
     '^/container-api': '' },
        changeOrigin: true,
        logLevel: 'debug'
      },
    }
  },

2.解决方式

但是我在配置之后并没有任何日志打印在控制台。不知道是vue-cli5需要配置专门的日志插件还是其他原因。我已经在github提出issues，不知道是否会有回应。
但是通过阅读源码发现，外面可以手动在源码中加入调试语句，不过并不推荐，仅作本地临时调试使用。

我们在node_modules/http-proxy-middleware/dist/http-proxy-middleware.js中的prepareProxyRequest方法中的this.logger.debug('[HPM] %s %s %s %s', req.method, originalPath, arrow, newProxyOptions.target);前面打印console即可。按道理源码中this.logger.debug方法应该要打印，但是它没有生效。所以我们手动打印就行了

二、手动实现

修改源码这种方式很不推荐，因为只能在自己本地使用，而且一旦更新包就需要重新修改，还是安心等待官方进行处理吧。
在这之前我们可以利用proxy的回调手动进行设置。

    proxy: {
    
    
      '/container-api': {
    
    
        target: 'http://***.***.***.204:30080',
        pathRewrite: {
    
    '^/container-api': ''},
        changeOrigin: true,
        logLevel: 'debug',
        onProxyReq: (proxyReq, req) => {
    
    
          // http请求
          console.log('[HPM] %s %s %s %s', req.method, req.originalUrl, '->', req.url);
        },
        onProxyReqWs(proxyReq, req, socket, options, head) {
    
    
          // websocket请求
          console.log('[HPM] %s %s %s %s', req.method, '-', req.url);
        }
      },
    }

利用onProxyReq和onProxyReqWs获取对应路径即可。具体打印方式各位可以自行调整，这里只是一个示例。