如何通过axios获取接口响应头中的总记录数字段X-Total-Count

1. 调整请求封装逻辑 #

你之前的封装仅返回res.data自然无法获取响应头，响应头存放在完整的response对象中，有两种调整方案：

方案A：返回完整响应对象，业务侧自行取值 #

// 接口封装层代码
import axios from 'axios'

export const fetchGlTrans = (params) => {
  return axios.get('http://localhost:8080/rest/s1/mantle/gl/trans', { params })
}

// 业务调用侧代码
fetchGlTrans(yourQueryParams).then(res => {
  const data = res.data
  // 注意：axios会自动将响应头转为全小写，必须用小写key取值
  const totalCount = res.headers['x-total-count']
  // 后续业务逻辑
})

方案B：封装层统一整合数据与头信息返回 #

// 接口封装层代码
export const fetchGlTrans = (params) => {
  return axios.get('http://localhost:8080/rest/s1/mantle/gl/trans', { params })
    .then(res => ({
      data: res.data,
      total: res.headers['x-total-count']
    }))
}

// 业务调用侧代码
fetchGlTrans(yourQueryParams).then(({ data, total }) => {
  // 直接使用即可
})

2. 跨域场景额外配置 #

如果调整封装后仍无法获取该字段，是因为浏览器跨域限制：默认仅暴露CORS安全头给前端，自定义的X-Total-Count需要后端额外配置响应头：

Access-Control-Expose-Headers: X-Total-Count
本地开发用代理转发的场景，确认代理配置未过滤自定义响应头即可。

内容的提问来源于stack exchange，提问作者Đỗ Như Vỹ