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标头。该值必须   是集合中资源的总数。这允许   休息管理员可以知道总共有多少页资源，   并建立分页控件。

内容范围：发布0-24 / 319（如果您的API位于另一个域上）   JS代码，您需要使用   Access-Control-Expose-Headers CORS标头。

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

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

访问控制公开标题：内容范围
内容范围：帖子0-24 / 319

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

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

response.headers.add（'Access-Control-Expose-Headers'，'Content-Range'）
添加标题“ Content-Range”并为其分配范围值（通常以字节为单位）

response.headers.add（'Content-Range'，'bytes：0-9 / *'）

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

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

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

“访问控制公开标题”，“内容范围” 要么 “内容范围”，“字节：0-9 / *”

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

Answer 2

您需要在请求中添加自定义标头，只需将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具有对Authorization令牌头的内置支持：

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的请求都将包含Authorization：SRTRDFVESGNJYTUKTYTHRG标头。

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

2 个答案: