一、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获取对应路径即可。具体打印方式各位可以自行调整,这里只是一个示例。