Nuxt.js中如何从API响应头动态获取总页数？

要从API响应头的x-total-count字段动态获取总页数，你需要调整$fetch的调用方式，让它返回完整的响应对象而非仅响应体数据，具体步骤如下：

• 默认$fetch只返回响应体，需通过$fetch.raw()方法获取包含响应头的完整响应对象
• 从响应头中提取x-total-count字段，转换为数字后赋值给pageTotal

修改后的完整代码：

const sort = ref({ column: 'licensePlate', direction: 'asc' as const })
const page = ref(1)
const pageCount = ref(10)
const pageTotal = ref(0)   // 初始设为0，后续由API返回值动态更新
const pageFrom = computed(() => (page.value - 1) * pageCount.value + 1)
const pageTo = computed(() => Math.min(page.value * pageCount.value, pageTotal.value))

// Data
const { data: cars, status} = await useLazyAsyncData<{
  licensePlate: string
  arrivalDate: string
  charge: number
}[]>('cars', async () => {
  // 使用$fetch.raw获取完整响应对象
  const response = await $fetch.raw(`http://localhost:3001/deported`, {
    query: {
      q: search.value,
      '_page': page.value,
      '_limit': pageCount.value,
      '_sort': sort.value.column,
      '_order': sort.value.direction
    }
  })
  
  // 提取并转换响应头中的总页数
  const totalCount = response.headers.get('x-total-count')
  if (totalCount) {
    pageTotal.value = parseInt(totalCount, 10)
  }
  
  // 返回解析后的响应体数据
  return response._data
}, {
  default: () => [],
  watch: [page, search, pageCount, sort]
})

注意事项：

• 需确保后端API配置了CORS的Access-Control-Expose-Headers: x-total-count，否则浏览器会拦截自定义响应头，导致前端无法读取该字段
• 添加类型判断避免转换出错，防止x-total-count字段不存在或格式异常时出现报错

内容的提问来源于stack exchange，提问作者Bora Ersoy