By default, for cross-origin requests, browser JavaScript (fetch or axios) can only access CORS-safelisted response headers:

  • Cache-Control
  • Content-Language
  • Content-Length
  • Content-Type
  • Expires
  • Last-Modified
  • Pragma

All other custom response headers (such as pagination headers X-Total-Count or correlation IDs X-Request-ID) are blocked from JavaScript inspection unless explicitly exposed.

Syntax and usage

To expose custom headers to browser scripts, the server must send:

Access-Control-Expose-Headers: X-Total-Count, X-Request-ID, Retry-After

Once configured, client JavaScript can access the header values normally:

const response = await fetch('https://api.example.test/v1/items');
const totalCount = response.headers.get('X-Total-Count'); // Now readable!

How to test with curl

curl -i https://api.example.test/v1/items \
  -H "Origin: https://app.example.test"

Key takeaway

Browser security filters out custom response headers from JavaScript unless they are enumerated in the Access-Control-Expose-Headers response header. Always expose custom pagination, correlation, and rate-limit headers.