React admin Content-Range 标头在不存在时丢失

Question

React 管理员抱怨，因为它说缺少 Content-Range 标头，这不是任何想法吗？我应该指出这是我第一次使用 RA，所以可能会遗漏一些东西。

表达api代码：

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*")
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, X-Total-Count, Content-Range")
  next()
});
    app.get('/quickdrop/retailer', function(req, res) {
  const { Client } = require('@elastic/elasticsearch')

  const client = new Client({
      node: 'https://creds',
    })

    var allRecords = []
    client.search({
        index: 'the index',
        type: 'product',
        scroll: '10s',
        body: {
          query: {
            "match_all": {}
          }
        }
      }, function getMoreUntilDone(error, response) {
        // collect all the records
        console.log(allRecords.length)
        response.body.hits.hits.forEach(function (hit) {
          allRecords.push(hit);
        });
      
        if (response.body.hits.total.value !== allRecords.length) {
          // now we can call scroll over and over
          client.scroll({
            scrollId: response.body._scroll_id,
            scroll: '10s'
          }, getMoreUntilDone);
        } else {
          const response = allRecords.map((item) => {
            return {
              title: item._source.name,
              image: item._source.tthsImage,
              barcode: item._id
            }
          })
          res.set("Content-Range", `retailer 0-${allRecords.length}/${allRecords.length}`)
          res.set("X-Total-Count", allRecords.length)
          res.json(response);
        }
      });
});

回复截图：

使用 axios 从数据提供者获取列表：

getList: (resource, params) => {
    const { page, perPage } = params.pagination;
    const { field, order } = params.sort;
    const query = {
        sort: JSON.stringify([field, order]),
        range: JSON.stringify([(page - 1) * perPage, page * perPage - 1]),
        filter: JSON.stringify(params.filter),
    };
    const url = `${apiUrl}/${resource}?${stringify(query)}`;

    return axios.get(url).then((response) => {

        console.log(response.headers) // Returns content length and type
        let records = response.data.map(record => ({ id: record.barcode, ...record }))
        return {
            data: records,
            total: records.length,
        }
    })
}

Answer 1

这不是服务器端问题。在你的反应管理员中

1. 您是否使用自定义数据提供程序？

2. 如果不是，您的响应实际上是数据还是类似于 response.data ？如果是这样，您只需创建一个自定义数据提供程序。我有同样的问题。

Answer 2

如果你可以访问你的 API 代码，我就是这样解决我的问题的。

1. npm install cors

然后在你的索引文件中添加如下，确保 cors 在 express 之后

const cors = require('cors');
const app = express();

// configs for cors and others
app.use(cors());
app.options('*', cors());

1. 去你的路线

    const cors = require('cors');
   
        const corsOptions = {
          origin: 'http://localhost:3000',
          optionsSuccessStatus: 200,
        };
   
        // PRE-FLIGHT
        router
          .route('/', cors(corsOptions))
        router
          .route('/:id', cors(corsOptions))
   

   1. 在你的控制器中

      res.set({ '访问控制公开标题'：'内容范围'， “内容范围”：X-Total-Count: ${1} - ${rowCount} / ${rowCount} });

   如果您无权访问您的 API，请使用它。

    const httpClient = (url, options = {}) => {
      if (!options.headers) {
        options.headers = new Headers({ Accept: 'application/json' });
      }
    // add your own headers here
       options.headers.set('X-Custom-Header', 'foobar');
      // const token = localStorage.getItem('token');
       const token = 'XXXXXXXXXXXXX';
         options.headers.set('Authorization', `Bearer ${token}`);
      return fetchUtils.fetchJson(url, options);
    };
   

   参考号：https://marmelab.com/react-admin/DataProviders.html#usage