javascript - HTTP 响应中缺少 react-admin
问题描述
我正在尝试使用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");
}
};
}
添加暴露的标头后仍然出现错误:
解决方案
简单的 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
推荐阅读
- c++ - 转换非常长的 C++ 字符串文字以满足最大行长策略
- css - Angular Material 触摸屏滚动问题
- android - 如何通过带有标头的 volley 发布 JSON 请求?
- jsf - 刷新 JSF 中的 UI 组件
- elasticsearch - 需要帮助将 ElasticSearch 过滤器布尔查询从 1.7 转换为 6.7
- shell - 在匹配的字符串之间循环(考虑一个数据集)然后控件应该移动到下一个数据集
- graphql - 从 Java 中的 GraphQL 查询中提取查询名称及其字段
- sql - SQL 查询:哪里 datetime = 过去 24 小时,怎么做?
- google-cloud-platform - MongoDB Atlas 与 GCP 对等现有集群
- javascript - 我想打印“2019 到 2020”,目前它显示 2019-04-01 到 2020-03-31