webpack如何打印请求的接口信息

Question

项目中使用vue+webpack，过程中使用了webpack-dev-server代理解决跨域问题，但是每次请求接口看到的地址都是本地地址，不方便调试，请问如何在命令窗口控制台打印出请求的接口信息呢？

devServer: {
        host:'192.168.1.230',
        disableHostCheck: true,
        proxy:[
            {
                context: ['/qd', '/logout'],
                target: 'http://192.168.1.119:11000/psycholConsult/',
                secure: false,
                changeOrigin:true
            }
        ]
    },

Answer 1

看题主大概是想在控制台打印发送请求的实际具体地址：
如果使用了axios这个http库的话，可以在发送请求之前做一些事情

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    // 比如 打印请求的url
    console.log("real request url ==> ", config.url)
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });

Answer 2

题主应该是想看到这样的信息。上面说通过前端控制台看的只能看到看到webpack代理前的信息。

为了打印日志，只需要加一行logLevel

我从这篇文章看到：https://xwenliang.cn/p/5add9a8a9e10d5d73c000001

Answer 3

啊，什么意思啊？如果要调试，浏览器的 devtool 够用了吧，看命令窗口的控制台干什么