前端项目调试模式下在控制台打印代理日志（重定向日志）的方法

朱雀 2022-01-23 14:45 388阅读 0赞

## 背景 ##

以下演示在微服务架构下的前后端分离模式，在本地调试时如何启用代理日志：

**这里插入一个话题：为什么要代理？**  
因为这种模式下存在跨域问题，虽然webpack可以很方便的为我们提供代理支持，但默认情况下并没有启用代理日志。那该如何开启呢？请往下看！

## 示例 ##

**1、打开并编辑以下文件：**

`/config/index.js`

proxyTable: { 
      '/userApi': { 
        target: 'http://api.user.domain.com',
        pathRewrite: { 
          '^/userApi': ''
        },
        logLevel: 'debug',
        changeOrigin: true
      },
      '/orderApi': { 
        target: 'http://api.order.domain.com',
        pathRewrite: { 
          '^/orderApi': ''
        },
        logLevel: 'debug',
        changeOrigin: true
      },
      '/supplierApi': { 
        target: 'http://api.supplier.domain.com',
        pathRewrite: { 
          '^/supplierApi': ''
        },
        logLevel: 'debug',
        changeOrigin: true
      }
    }

**2、代理日志（重定向日志）**

[HPM] ...
    [HPM] Rewriting path from "/userApi/user/list" to "/user/list"
    [HPM] GET /userApi/user/list ~> http://api.user.domain.com
    [HPM] Rewriting path from "/orderApi/order/list" to "/order/list"
    [HPM] GET /orderApi/order/list ~> http://api.order.domain.com
    [HPM] Rewriting path from "/supplierApi/supplier/list" to "/supplier/list"
    [HPM] GET /supplierApi/supplier/list ~> http://api.supplier.domain.com
    [HPM] ...

## 划重点 ##

只需在每个代理的配置下添加`logLevel: 'debug'`即可！