Question

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

错误：

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

和

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

我试图添加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

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

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

Answer 2

在您的后端 API 函数需要获取 X-Total-Count 并将其设置为 Response Header

示例：

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."
      });
    });
};

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

2 个答案: