vue.config.js使用代理配置真实请求url

前端请求接口过程中会统一配置代理请求url，配置之后浏览器只能看到local host路径。

为方便查看请求的真实ip，需要在vue.config.js中做如下配置，便能在浏览器实时查看到真实地址

  devServer: {
   //端口配置
    port: '9080',
    open: true,
    //host: 'localhost',打开之后不能使用IP访问项目
    proxy: {
      '/basic': {
        target: process.env.VUE_APP_BASE_API,//配置文件的请求url
        // target: 'http://10.31.126.172:9080',
        changeOrigin: true,
        ws: true,
        // pathRewrite: { '^/api': '' },
        onProxyRes(proxyRes, req, res) {
          //在控制台显示真实代理地址
          const realUrl = new URL(req.url || '',process.env.VUE_APP_BASE_API)?.href || ''
          proxyRes.headers['x-real-url'] = realUrl
        },
      },
    },
  },

配置完重启，效果如下：