CODEWITHSUNDEEP
javascriptreactjsspringcorsreact-admin
Maifee Ul Asad
Maifee Ul Asad

Reputation: 4607

react-admin missing in the HTTP Response

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");
            }
        };
    }

enter image description here

Still getting error, after adding exposed header:

enter image description here

Upvotes: 1

Views: 2529

Answers (1)

Fran&#231;ois Zaninotto
Fran&#231;ois Zaninotto

Reputation: 7335

The answer is written in the react-admin documentation:

The simple REST client expects the API to include a Content-Range header in the response to getList calls. The value must be the total number of resources in the collection. This allows react-admin to know how many pages of resources there are in total, and build the pagination controls.

Content-Range: posts 0-24/319

If your API is on another domain as the JS code, you’ll need to whitelist this header with an Access-Control-Expose-Headers CORS header.

Access-Control-Expose-Headers: Content-Range

Upvotes: 2

Related Questions