axios 获取响应头 开发环境和生产环境不一致问题

一、axios 响应拦截器获取响应头

axios.interceptors.response.use(
  (res) => {
    const { config, data, headers, status } = res;

    console.log(
      `-----------------------${config.url}请求开始------------------------`
    );
    console.log(`接口地址：`, config.url);
    console.log(`接口请求方式：`, config.method);
    console.log(
      `接口请求参数：`,
      config.method === "get" ? config.params : config.data
    );
    console.log(`接口请求头：`, config.headers);
    console.log(`接口响应头：`, headers);
    console.log(`接口响应状态：`, status);
    console.log(`接口响应数据：`, data);
    console.log(
      `-----------------------${config.url}请求结束------------------------`
    );
    
    return res;
  },
  (err) => {
    return Promise.reject(err);
  }
);

开发环境 log

生产环境 log

二、设置 Access-Control-Expose-Headers

如果想要在生产环境获取响应头其他属性，需要后端人员设置 Access-Control-Expose-Headers

这样就成功获取到其他参数啦

Access-Control-Expose-Headers : "X-Pagination-Total-Count"

 设置之后生产环境获取到的响应头