React Admin报错X-Total-Count缺失，如何设置该响应头？

1. 在Express接口中添加X-Total-Count响应头 #

React Admin的jsonServerProvider要求列表接口返回的响应必须包含X-Total-Count头，用来告知总数据量以实现分页。你需要先查询数据总数，再将其设置到响应头中：

修改你的/posts接口代码：

// get posts
app.get("/posts", async (req, res) => {
  try {
    const total = await Post.countDocuments(); // 获取总数据量
    const posts = await Post.find();
    res.set('X-Total-Count', total.toString()); // 设置响应头
    res.status(200).json(posts);
  } catch (error) {
    console.log(error);
    res.status(500).json({ message: '获取文章失败' });
  }
});

2. 配置CORS暴露自定义响应头 #

由于你使用了CORS，浏览器默认不会允许前端访问自定义响应头，所以需要在CORS中间件中配置exposedHeaders，将X-Total-Count加入暴露列表：

修改CORS中间件的配置：

app.use(cors({
  exposedHeaders: ['X-Total-Count'] // 暴露自定义响应头
}));

完成以上修改后，前端就能正常读取到X-Total-Count头，React Admin的分页功能也能正常工作。

内容的提问来源于stack exchange，提问作者chris z