HTTP 响应中缺少 react-admin

Posted 2023-03-04

【中文标题】HTTP 响应中缺少 react-admin

【英文标题】：react-admin missing in the HTTP Response

【发布时间】：2020-05-09 14:29:18

【问题描述】：

我正在尝试使用react-admin 创建一个管理面板。

这是我所做的：

class AdminPanel extends React.Component

    render() 
        return(
          <div>
              <Admin dataProvider=restProvider('http://localhost:8080')>
                  <Resource name="u/all" list=PostList/>
              </Admin>
          </div>
        );
    

在另一个js文件中，我定义了PostList。

在我的服务器中，我正在调试/u/all 是否受到任何打击。来了。

但是 react.js 给了我错误，说：错误：HTTP 响应中缺少 Content-Range 标头。简单的 REST 数据提供者期望资源列表的响应包含此标头以及构建分页的结果总数。如果您使用的是 CORS，您是否在 Access-Control-Expose-Headers 标头中声明了 Content-Range？

我该如何解决这个问题？

PostList.js：

export const PostList = (props) => (

    <List ...props>
        <Datagrid>
            <TextField source="userID" />
            <TextField source="username" />
            <DateField source="firstName" />
            <TextField source="middleName" />
            <TextField source="lastName" />
            <TextField source="profileImageURL" />
            <TextField source="joiningTime" />
            <EditButton basePath="/posts" />
        </Datagrid>
    </List>
);

我的服务器端 CORS：

@Bean
    public WebMvcConfigurer corsConfigurer() 
        return new WebMvcConfigurer() 
            @Override
            public void addCorsMappings(CorsRegistry registry) 
                registry
                        .addMapping("/**")
                        .allowedOrigins("http://localhost:3000","http://localhost:3001")
                        .exposedHeaders("Content-Range");
            
        ;
    

添加暴露的标头后仍然出现错误：

【问题讨论】：

添加.exposedHeaders("Content-Range")。见docs.spring.io/spring/docs/current/javadoc-api/org/…

@sideshowbarker 也试过了，还是报错

【参考方案1】：

答案写在in the react-admin documentation：

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

Content-Range: posts 0-24/319

如果您的 API 作为 JS 代码位于另一个域中，您需要使用 Access-Control-Expose-Headers CORS 标头将此标头列入白名单。

Access-Control-Expose-Headers: Content-Range

【讨论】：

我在 CORS 中添加了Access-Control-Expose-Headers，但仍然出现错误.. 我已经更新了问题

除了在 CORS 中公开标头之外，您的 API 路由还必须在响应中包含标头...

我试过了，但我做不到，甚至这里的一些 que 也没有任何答案或任何可接受的答案......

我已经添加了内容范围，它仍然得到错误：***.com/questions/59891595/…