错误：HTTP 响应中缺少内容范围标头

Question

我正在休息时设置管理员，现在我在尝试获取数据时遇到此错误，即使我从服务器收到了所有需要的数据：

The Content-Range header is missing in the HTTP Response. The simple REST client expects responses for lists of resources to contain this header with the total number of results to build the pagination. If you are using CORS, did you declare Content-Range in the Access-Control-Expose-Headers header?

有没有办法不用修改API就可以解决？我正在根据教程进行授权，这是我的 app.js：

   if (!options.headers) {
        options.headers = new Headers({ Accept: 'application/json' });
    }
    const token = localStorage.getItem('token');
    options.headers.set('Authorization', `Bearer  ${"token"}`);
    return fetchUtils.fetchJson(url, options);
}
const restClient = simpleRestClient('https://mywebsite.com', httpClient);

const App = () => (
<Admin restClient={restClient} authClient={authClient}>
    <Resource name="posts"  list={PostList}  edit={PostEdit} create={PostCreate}/>
        <Resource name="users" list={UserList}/>
    </Admin>
);

Answer 1

问题不在 React-App 上，而是在您的 REST 服务器上。

在我的例子中，我使用的是 SimpleRestClient，在他们的文档中它是这样写的

import simpleRestProvider from 'ra-data-simple-rest';

注意：简单的 REST 客户端希望 API 包含一个 对 GET_LIST 调用的响应中的 Content-Range 标头。该值必须 是集合中资源的总数。这允许 admin-on-rest 知道总共有多少页资源， 并构建分页控件。

Content-Range: posts 0-24/319 如果你的 API 在另一个域上 JS 代码，您需要使用 Access-Control-Expose-Headers CORS 标头。

访问控制公开标头：内容范围

因此，它必须从您的服务器/REST 服务器返回（包含在响应中）两个标头

1. 访问控制公开标头：内容范围
2. 内容范围：帖子 0-24/319

在我的烧瓶服务器中，这就是我所做的

1. 在您的回复中添加“内容范围”标题。

   response.headers.add('Access-Control-Expose-Headers', 'Content-Range')

2. 添加标题'Content-Range'并为其分配一个范围值（通常以字节为单位）

   response.headers.add('Content-Range','bytes : 0-9/*')

最后：我注意到当您的响应中省略任何一个标题时，您会得到同样的错误

错误：HTTP 响应中缺少 Content-Range 标头

确保您的服务器返回这些标头

'Access-Control-Expose-Headers', 'Content-Range' 或者 '内容范围','字节数：0-9/*'

我希望这会有所帮助，因为这是我第一次回答 SO 问题

Answer 2

如果你使用 fastapi 和 react admin，你需要将它添加到路由中

   response.headers['X-Total-Count'] = '30' 
   response.headers['Access-Control-Expose-Headers'] = 'Content-Range'
``

Answer 3

如果你做了以上所有的解决方案但还是不行，你可以尝试配置你的api：

以 Laravel PHP 为例：

return response()->json($films)->header('X-Total-Count', count($films));

Answer 4

您需要为您的请求添加自定义标头，您可以将

fetchJson()

调用包装在您自己的函数中：

例如：

import { fetchUtils, Admin, Resource } from 'react-admin';
import simpleRestProvider from 'ra-data-simple-rest';

const fetchJson = (url, options = {}) => {
    if (!options.headers) {
        options.headers = new Headers({ Accept: 'application/json' });
    }
    // add your own headers here
    options.headers.set('X-Custom-Header', 'foobar');
    return fetchUtils.fetchJson(url, options);
}
const dataProvider = simpleRestProvider('http://path.to.my.api/', fetchJson);

const App = () => (
    <Admin dataProvider={dataProvider}>
        <Resource name="posts" list={PostList} />
    </Admin>
);  

自定义标头最常见的用途是用于身份验证。 fetchJson 内置了对授权令牌标头的支持：

const fetchJson = (url, options = {}) => {
    options.user = {
        authenticated: true,
        token: 'SRTRDFVESGNJYTUKTYTHRG'
    };
    return fetchUtils.fetchJson(url, options);
};
const dataProvider = simpleRestProvider('http://path.to.my.api/', fetchJson);

现在所有对 REST API 的请求都将包含授权：SRTRDFVESGNJYTUKTYTHRG 标头。