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

如何解决React admin Content-Range标头不存在时会丢失

反应管理员在抱怨，因为它说缺少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：

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,}
    })
}

解决方法

这不是服务器端问题。在您的react管理员中

您是否正在使用自定义数据提供程序？
如果不是，您的响应实际上就是数据还是像response.data一样？如果是这样，您只需创建一个自定义数据提供程序。我有同样的问题。

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

npm 安装 cors

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

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

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

转到您的路线

 const cors = require('cors');

     const corsOptions = {
       origin: 'http://localhost:3000',optionsSuccessStatus: 200,};

     // PRE-FLIGHT
     router
       .route('/',cors(corsOptions))
     router
       .route('/:id',cors(corsOptions))

在您的控制器中

res.set({ 'Access-Control-Expose-Headers': 'Content-Range',“内容范围”：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