The X-Total-Count header is missing in the HTTP Response.

[cyclops24]

Hi @kimkha I try using your RestClient but it's return below error:

The X-Total-Count header is missing in the HTTP Response. The jsonServer 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 X-Total-Count in the Access-Control-Expose-Headers header?

Do you have any idea?

[kimkha]

Because the Loopback server didn't support that header. But you can add it by using my another component: https://github.com/kimkha/loopback3-xTotalCount

[cyclops24]

@kimkha Thanks for your quick response. 😉
I add this package and add related line to server/server.js file but my admin ui still return previous error:

'use strict';

var loopback = require('loopback');
var boot = require('loopback-boot');

var app = module.exports = loopback();
require('loopback3-xtotalcount')(app);
...

Do you have any other suggestion for me?

[kimkha]

How about add this to your component-config.json?

"loopback3-xtotalcount": {
    "pattern": [
      "*.find"
    ]
  }

[cyclops24]

No it's still show above error message.

[kimkha]

Did you remove require('loopback3-xtotalcount')(app); on your server.js?

[kimkha]

Sounds strange....

[cyclops24]

No require('loopback3-xtotalcount')(app); still there.

[kimkha]

Try to remove it please, just use component setting.

[cyclops24]

After remove that line, this warning message gone but it's still show bellow error message on admin ui client:

The X-Total-Count header is missing in the HTTP Response. The jsonServer 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 X-Total-Count in the Access-Control-Expose-Headers header?

[kimkha]

Can you use API Explorer and call find API, then check the response header?

Or can you post your code on here?

[cyclops24]

My project is a little big and I can't post all of code. Which part of code needs now?
I call a GET to http://0.0.0.0:3001/api/Projects and it's response header:

{
  "content-type": "application/json; charset=utf-8",
  "content-length": "164",
  "etag": "W/\"a4-zZqbHh2TejGRI9xacJgwQvt2KYM\"",
  "vary": "Origin",
  "access-control-allow-credentials": "true",
  "x-xss-protection": "1; mode=block",
  "x-frame-options": "DENY",
  "x-download-options": "noopen",
  "x-content-type-options": "nosniff",
  "x-total-count": "1",
  "date": "Wed, 10 May 2017 16:12:37 GMT"
}

[kimkha]

Already had "x-total-count": "1" in response... but somehow...

Could you please show me your App.js file?

[cyclops24]

Is it need Access-Control-Expose-Headers too in header?

[cyclops24]

it's my App.js:

import React from 'react';
import { Admin, Resource } from 'admin-on-rest';
import loopbackRestClient from 'aor-loopback';

import { ProjectList } from './projects';

const App = () => (
    <Admin restClient={loopbackRestClient('http://0.0.0.0:3001/api')}>
        <Resource name="projects" list={ProjectList} />
    </Admin>
);

export default App;

[kimkha]

Maybe, if your react apps and your loopback use different domain.

[cyclops24]

My react admin-on-rest URL is: http://0.0.0.0:3000 and my loopback URL is: http://0.0.0.0:3001

[kimkha]

Please try to use Access-Control-Expose-Headers on Loopback. And let me know the result, please... :)

[cyclops24]

Can you guide me how we can add Access-Control-Expose-Headers to LoopBack?

[cyclops24]

I have to go home now. I continue this project and check this issue after this.
@kimkha Maybe a gitter chat room for this repo can useful 😉

[kimkha]

Actually, I don't know how to add that header.

Ah, did you open developer console and see Network tab?

[cyclops24]

Hi @kimkha ,
It's my network tab image:

[kimkha]

I found it. To allow other headers over cross domain, we must expose in the setting of cors.

So, open middleware.json, add "exposedHeaders": "X-Total-Count" under initial.cors.params

[cyclops24]

Hi @kimkha ,
It's fixed after add "exposedHeaders": "X-Total-Count" to middleware.json.
Thanks for your attention.
I think https://github.com/kimkha/loopback3-xTotalCount need some documentation about it.