Exposing Response Headers to the Browser

When working with CORS, you may need to let browsers access certain custom response headers from your backend. By default, browsers only make a limited set of response headers available to JavaScript running on the client side. To expose additional headers, you use the Access-Control-Expose-Headers response header. This header tells the browser which headers it is allowed to make accessible to frontend JavaScript code after a cross-origin request.

Browsers always expose a small set of "simple" response headers by default, including:

• Cache-Control;
• Content-Language;
• Content-Type;
• Expires;
• Last-Modified;
• Pragma.

If your backend sends other headers—such as X-Custom-Header, X-Auth-Token, or any custom metadata—they will not be readable by the browser unless you explicitly expose them using Access-Control-Expose-Headers. This is important when your frontend needs to access authentication tokens, pagination info, or any custom data sent in headers.

HTTP/1.1 200 OK
Access-Control-Allow-Origin: https://example.com
Access-Control-Expose-Headers: X-Custom-Header
X-Custom-Header: ExampleValue
Content-Type: application/json

{
  "message": "Success"
}

In this example, the backend response includes the Access-Control-Expose-Headers: X-Custom-Header header. This tells the browser that JavaScript running on https://example.com can access the value of the X-Custom-Header header using APIs like fetch or XMLHttpRequest. Without this configuration, the browser would block access to X-Custom-Header, keeping it hidden from client-side scripts.