I'm trying to create a admin panel using react-admin.
Here is what I have done :
class AdminPanel extends React.Component{
render() {
return(
<div>
<Admin dataProvider={restProvider('http://localhost:8080')}>
<Resource name="u/all" list={PostList}/>
</Admin>
</div>
);
}
}
And in another js file, I have defined PostList.
In my server I am debugging if /u/all is getting any hit or not. It's getting.
But react.js giving me error, saying : Error: The Content-Range header is missing in the HTTP Response. The simple REST data provider 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?
How can I solve this ?
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>
);
My Server side 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");
}
};
}
Still getting error, after adding exposed header:
