Question

我正在尝试使用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");
            }
        };
    }

添加公开的标头后仍然出现错误：

Answer 1

答案写为in the react-admin documentation：

简单的REST客户端希望该API在对getList调用的响应中包含Content-Range标头。该值必须是集合中资源的总数。这使react-admin可以知道总共有多少页资源，并建立分页控件。
${TOKEN}
如果您的API作为JS代码位于另一个域上，则需要使用Access-Control-Expose-Headers CORS标头将此标头列入白名单。
Content-Range: posts 0-24/319

HTTP响应中缺少react-admin

1 个答案: