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

Guffey

seen this?: github.com/marmelab/admin-on-rest/issues/176 – Winnow

yes, but the best answer is to solve it inside of rails response.headers['X-Total-Count'] = '30' response.headers['Access-Control-Expose-Headers'] = 'X-Total-Count' I have tried it and it doesn't work. Is there a way to solve it inside reactjs? – Guffey

try Content-Range instead of X-Total-Count. – Winnow

It gives me an error on those linesArgumentError (wrong number of arguments (given 0, expected 2)): – Guffey

response.headers['Content-Range'] = 'posts 0-24/319' – Winnow

@Winnow React still gives me the same error. Here is my Response Headers: imgur.com/nlsFCWm – Guffey

This is not a React problem, it's about admin on rest. Maybe file an issue at their Github. – Winnow

Can you post a screenshot of the React error you receive (with stacktrace) please ? EDIT: I mean, can you confirm you still have an error about missing Content-Range header ? – Grunt

Were you able solve this, i am getting the same err ? – Overlive

X-Total-Count can be included in header but Content-Range is omitted when browser receive response header... – Dartmouth

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

Motteo

Answer 2

If you are using fastapi with react admin you need to add this to route

   response.headers['X-Total-Count'] = '30' 
   response.headers['Access-Control-Expose-Headers'] = 'Content-Range'
   response.headers["Content-Range"] = "bytes: 0-9/*"

``

Pyrazole

Answer 3

if you did all above solution but not work, you can try to config your api:

just for example in Laravel PHP:

return response()->json($films)->header('X-Total-Count', count($films));

Eraser

Answer 4

You need to add custom headers to your requests, you can just wrap the fetchJson() call inside your own function:

For instance:

import { fetchUtils, Admin, Resource } from 'react-admin';
import simpleRestProvider from 'ra-data-simple-rest';

const fetchJson = (url, options = {}) => {
    if (!options.headers) {
        options.headers = new Headers({ Accept: 'application/json' });
    }
    // add your own headers here
    options.headers.set('X-Custom-Header', 'foobar');
    return fetchUtils.fetchJson(url, options);
}
const dataProvider = simpleRestProvider('http://path.to.my.api/', fetchJson);

const App = () => (
    <Admin dataProvider={dataProvider}>
        <Resource name="posts" list={PostList} />
    </Admin>
);  

For the most common usage of custom headers is for authentication. fetchJson has built-on support for the Authorization token header:

const fetchJson = (url, options = {}) => {
    options.user = {
        authenticated: true,
        token: 'SRTRDFVESGNJYTUKTYTHRG'
    };
    return fetchUtils.fetchJson(url, options);
};
const dataProvider = simpleRestProvider('http://path.to.my.api/', fetchJson);

Now all the requests to the REST API will contain the Authorization: SRTRDFVESGNJYTUKTYTHRG header.

Braunite