Error: The Content-Range header is missing in the HTTP Response

Question

I am setting up admin on rest, and now I am getting this error when I try to fetch data, even though I receive all the data needed from the server:

The Content-Range header is missing in the HTTP Response. The simple REST client 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?

Is there a way to solve it without making changes to the API? I was doing authorization based on the tutorial, here is my app.js:

   if (!options.headers) {
        options.headers = new Headers({ Accept: 'application/json' });
    }
    const token = localStorage.getItem('token');
    options.headers.set('Authorization', `Bearer  ${"token"}`);
    return fetchUtils.fetchJson(url, options);
}
const restClient = simpleRestClient('https://mywebsite.com', httpClient);

const App = () => (
<Admin restClient={restClient} authClient={authClient}>
    <Resource name="posts"  list={PostList}  edit={PostEdit} create={PostCreate}/>
        <Resource name="users" list={UserList}/>
    </Admin>
);

Answer 1

The issue is not on the React-App but rather your REST server.

In my case, I was using the SimpleRestClient and in their documentation it reads

import simpleRestProvider from 'ra-data-simple-rest';

Note: The simple REST client expects the API to include a Content-Range header in the response to GET_LIST calls. The value must be the total number of resources in the collection. This allows admin-on-rest 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

So, from your server/the REST server it has to return(include in response) two headers

1. Access-Control-Expose-Headers: Content-Range
2. Content-Range: posts 0-24/319

In my flask-server here's what i did

1. Add the 'content-range' header in your responses.

   response.headers.add( 'Access-Control-Expose-Headers', 'Content-Range')

2. Add the header 'Content-Range' and assign it a range value(usually in bytes)

   response.headers.add('Content-Range','bytes : 0-9/*')

Finally: I noticed that when either of the headers is omitted from your response you'd get the same error

Error: The Content-Range header is missing in the HTTP Response

Ensure your server returns these headers

'Access-Control-Expose-Headers', 'Content-Range' or 'Content-Range','bytes : 0-9/*'

I hope this helps as it's my ever first response to a SO question