React admin-on-rest 添加 X-Total-Count

Question

我正在使用 admin-on-rest 但在尝试连接到 github api 时出现错误

错误：

HTTP 响应中缺少 X-Total-Count 标头。jsonServer REST 客户端期望资源列表的响应包含此标头以及构建分页的结果总数。如果您使用 CORS，您是否在 Access-Control-Expose-Headers 标头中声明了 X-Total-Count？

和

警告：缺少键的翻译：“HTTP 响应中缺少 X-Total-Count 标头。jsonServer REST 客户端期望资源列表的响应包含此标头以及构建分页的结果总数。如果您是使用 CORS，您是否在 Access-Control-Expose-Headers 标头中声明了 X-Total-Count？”

我尝试添加 X-Total-Count 标头，但随后出现新错误

render() {

const httpClient = (url, options = {}) => {
  if (!options.headers) {
    options.headers = new Headers({Accept: 'application/json'});
  }
  // add your own headers here
  options.headers.set('X-Total-Count', '32');
  return fetchUtils.fetchJson(url, options);
}

const restClient = jsonServerRestClient('https://api.github.com', httpClient);

return (
  <Admin restClient={restClient}>
    <Resource name="users" list={PostList}/>
  </Admin>
);
}

无法加载https://api.github.com/users?_end=10&_order=DESC&_sort=id&_start=0：预检响应中的 Access-Control-Allow-Headers 不允许请求标头字段 x-total-count。

Answer 1

在您的后端 API 函数中需要获取 X-Total-Count 并将其设置为响应标头

例子：

exports.findAll = (req, res) => {
  var total = Data.countAll()// your count all function
  Data.findAll({ where: condition })
    .then(data => {
      res.set('Access-Control-Expose-Headers', 'X-Total-Count')
      res.set('X-Total-Count', total)
      res.send(data);
    })
    .catch(err => {
      res.status(500).send({
        message:
          err.message || "Some error occurred while retrieving data."
      });
    });
};

Answer 2

正如 kunal pareek 所说，此标头必须是响应的一部分，而不是对此的请求jsonRestClient。

您必须创建restClient特定于 github api 的自定义。请阅读https://marmelab.com/admin-on-rest/RestClients.html#writing-your-own-rest-client。