Response headers empty with fetch

Updated on feb 18

I think I have found the problem and the solution is to declare the following response header on the GoRest server:

Access-Control-Expose-Headers: X-Pagination-Total,X-Pagination-Pages,X-Pagination-Page,X-Pagination-Limit

Hi, how can I access to pagination headers: X-Pagination-Total X-Pagination-Pages X-Pagination-Page X-Pagination-Limit ?

I'm trying this code:

const options = {
headers: {
    "Accept": "application/json",
    "Authorization": "Bearer MI-API-TOKEN-IS-HERE",
    "Content-Type": "application/json",
method: "GET",
cache: "no-cache"

fetch("", options)
.then(response => {
    console.log("limit: ", response.headers.get("X-Pagination-Limit")); // line 16
    response.headers.forEach( (val, key) => console.log(key + " -> " + val));  // line 17
    return response.json();
.then(users => {
    console.log(users);  //line 21

This is in console:

Response {type: 'cors', url: '', redirected: false, status: 200, ok: true, …}
 body: (...)
 bodyUsed: true
 headers: Headers {}
   [[Prototype]]: Headers
 ok: true
 redirected: false
 status: 200
 statusText: "OK"
 type: "cors"
 url: ""
 [[Prototype]]: Response

app.js:16 limit:  null

app.js:17 cache-control -> max-age=0, private, must-revalidate
app.js:17 content-type -> application/json; charset=utf-8

 (20) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
0: {id: 2865, name: 'Chetanaanand Joshi Esq.', email: '[email protected]', gender: 'male', status: 'inactive'}
1: {id: 2864, name: 'Aayushmaan Chopra DDS', email: '[email protected]', gender: 'male', status: 'inactive'}
2: {id: 2863, name: 'Ekalavya Kaul Sr.', email: '[email protected]', gender: 'male', status: 'active'}
3: {id: 2862, name: 'Jitender Rana', email: '[email protected]', gender: 'male', status: 'inactive'}
4: {id: 2861, name: 'Sharmila Tagore Jr.', email: '[email protected]', gender: 'male', status: 'active'}
5: {id: 2860, name: 'Nagabhushanam Pilla', email: '[email protected]', gender: 'male', status: 'inactive'}
6: {id: 2859, name: 'Aanandaswarup Kaniyar', email: '[email protected]', gender: 'male', status: 'inactive'}
7: {id: 2858, name: 'Lakshmidhar Tagore', email: '[email protected]', gender: 'male', status: 'inactive'}
8: {id: 2857, name: 'Rudra Nehru', email: '[email protected]', gender: 'male', status: 'inactive'}
9: {id: 2856, name: 'Annapurna Pilla', email: '[email protected]', gender: 'female', status: 'inactive'}
10: {id: 2855, name: 'Sushma Ganaka Sr.', email: '[email protected]', gender: 'female', status: 'active'}
11: {id: 2854, name: 'Tanushri Trivedi', email: '[email protected]', gender: 'female', status: 'inactive'}
12: {id: 2853, name: 'Mr. Ambar Nayar', email: '[email protected]', gender: 'female', status: 'active'}
13: {id: 2852, name: 'Dhananjay Bhat', email: '[email protected]', gender: 'male', status: 'active'}
14: {id: 2851, name: 'Damayanti Embranthiri', email: '[email protected]', gender: 'male', status: 'active'}
15: {id: 2850, name: 'Ekaparnika Nair VM', email: '[email protected]', gender: 'male', status: 'active'}
16: {id: 2849, name: 'Gov. Bhargava Abbott', email: '[email protected]', gender: 'female', status: 'active'}
17: {id: 2848, name: 'Mr. Bela Adiga', email: '[email protected]', gender: 'female', status: 'inactive'}
18: {id: 2847, name: 'Aasa Chopra', email: '[email protected]', gender: 'female', status: 'active'}
19: {id: 2846, name: 'Chidambar Sethi MD', email: '[email protected]', gender: 'female', status: 'active'}
length: 20
 [[Prototype]]: Array(0)

In jQuery I am able access the headers like this (this what used in the page)

var jqXHR = $.ajax(rsq); jqXHR.done((data, textStatus, jqXHR) => { jqXHR.getAllResponseHeaders(); });

Similar methods might exists in other javascript lib

Doesn't work for me, I'm using vanilla javascript, this code fails again:

const request = new XMLHttpRequest();"GET", "");
request.setRequestHeader('Accept', 'application/json');
request.setRequestHeader('Content-Type', 'application/json');
request.setRequestHeader('Authorization', 'Bearer MI-API-TOKEN');

request.onreadystatechange = () => {
  if(this.readyState == this.HEADERS_RECEIVED) {
    console.log(request.getAllResponseHeaders());  // line 34

request.onload = () => {
    if (request.status >= 200 && request.status < 300) {
        console.log(request.getAllResponseHeaders());  // line 39
    } else {

request.onerror = () => {


In console appears: app.js:34 cache-control: max-age=0, private, must-revalidate content-type: application/json; charset=utf-8

app.js:39 cache-control: max-age=0, private, must-revalidate
content-type: application/json; charset=utf-8

In I can get headers, but not from javascript with CORS request

Something is not right, why does the browser hide almost all gorest headers? Try this code

<!DOCTYPE html>
"use strict";

const showHeaders = response => {
    // get one header
    console.log('Header Content-Type->',response.headers.get('Content-Type')); // application/json; charset=utf-8

    // iterate over all headers
    console.log('All headers->',)
    for (let [key, value] of response.headers) {
        console.log(`${key} = ${value}`);

.then (showHeaders);

.then (showHeaders);

In browser developer tools I can see the full headers (including GoRest), but I can't access the full GoRest headers from javascript. It doesn't matter if the request is CORS or not.

the difference between one request and another is that gorest declares an empty Access-Control-Expose-Headers, while github API declares with: Access-Control-Expose-Headers: "ETag, Link, Location, Retry-After, X-GitHub-OTP, X-RateLimit-Limit, X-RateLimit-Remaining, X-RateLimit-Used, X-RateLimit-Resource, X-RateLimit-Reset, X-OAuth-Scopes, X-Accepted-OAuth-Scopes, X-Poll-Interval, X-GitHub-Media-Type, X-GitHub-SSO, X-GitHub-Request-Id, Deprecation, Sunset". Can someone at GoRest's server add the following response header? Access-Control-Expose-Headers: X-Pagination-Total,X-Pagination-Pages,X-Pagination-Page,X-Pagination-Limit

I think this would fix the problem

Thankyou for debugging into it, It seems custom headers needs to be enabled at server side for CORS.

Can you please try now and see, I fixed this at server side

Hi, thank you! it works like a champ!

Great thanks for the confirmation

Little markdown supported