Next.js中getStaticProps调用API返回200OK但无数据问题

算力阿峰

2026-8-2

解决Next.js getStaticProps中axios请求返回数据找不到的问题

核心原因与解决方案

你现在打印的是原生浏览器Response对象，而非axios封装后的响应结构，要么是没找对数据位置，要么是axios未正常工作。

1. 正常axios响应的数据位置

如果axios正常运行，请求返回的数据会存放在res.data属性中，直接打印该属性即可获取：

export const getStaticProps = async () => {
  const config = {
    headers: { Authorization: 'Bearer xxxxxxx'}
  }

  const res = await axios.get('https://wookie.codesubmit.io/movies', config)

  // 打印实际返回的业务数据
  console.log(res.data)

  return {
    props: { movies: res.data }
  }
}

2. 出现原生Response对象的排查方向

若上述方法无效，说明axios未正确处理请求，可按以下步骤排查：

确认axios的导入与安装：
确保文件顶部有import axios from 'axios'，并且已通过npm install axios完成依赖安装。
升级axios版本：
老旧版本axios在Next.js服务端环境可能存在兼容性问题，执行命令升级到最新版：
```
npm update axios
```

替换为fetch API（备选方案）：
如果axios仍异常，可直接使用原生fetch手动解析响应：

export const getStaticProps = async () => {
  const res = await fetch('https://wookie.codesubmit.io/movies', {
    headers: { Authorization: 'Bearer xxxxxxx'}
  })
  // 解析JSON格式的响应体
  const data = await res.json()
  console.log(data)

  return {
    props: { movies: data }
  }
}