Access Control Expose Headers

The HTTP Access-Control-Expose-Headers response header enables a server to specify which response headers should be accessible to scripts executing in the browser in response to a cross-origin request.

Note: Only the CORS-safelisted response headers are exposed by default. To grant access to other headers, the server must explicitly list them using the Access-Control-Expose-Headers header.

Syntax

Note: The “Access-Control-Expose-Headers” header is used in CORS to specify which headers are safe to expose to the API of a CORS API specification. You can specify a list of headers or use an asterisk to expose all headers.

Access-Control-Expose-Headers: <header-name>, <header-name>*
Access-Control-Expose-Headers: *

Directives

<header-name>

A list of zero or more comma-separated header names that clients are permitted to access from a response. These are in addition to the CORS-safelisted response headers.

* (wildcard)

Any header.
The value * functions as a special wildcard value for requests that do not include credentials, such as requests without HTTP cookies or HTTP authentication information.
In requests with credentials, it is interpreted as the literal header name *.

Examples

The CORS-safelisted response headers include: Cache-Control, Content-Language, Content-Length, Content-Type, Expires, Last-Modified, and Pragma. To expose a response header that is not CORS-safelisted, you can specify it explicitly:

Note: When exposing additional headers, make sure they are safe to be shared cross-origin.

For example:

Access-Control-Expose-Headers: Content-Encoding

To expose a custom header such as Kuma-Revision, list multiple headers separated by commas:

Access-Control-Expose-Headers: Content-Encoding, Kuma-Revision

For requests made without credentials, the server can respond with a wildcard *:

Access-Control-Expose-Headers: *

In case of requests with credentials, using * as a value for expose headers is not permitted; instead, the server may respond with *, which in this context would refer to a header named *.

How to Modify Header using Requestly

Requestly is a powerful Chrome extension that allows you to modify HTTP headers, including the Access-Control-Expose-Headers header. This is especially useful for controlling which headers are accessible to client-side JavaScript in cross-origin requests during development or debugging. Steps to Modify the Access-Control-Expose-Headers Header:

1. Install and open the Requestly Chrome extension. You can find it on the Chrome Web Store.
2. Create a new rule: Click on “Create Rule” and choose “Modify Headers” from the list of available rule types.
3. Add a new header modification:
   • Under “Action”, select “Add” or “Override”.
   • In the “Header Name” field, enter Access-Control-Expose-Headers.
   • In the “Header Value” field, enter the headers you want to expose (e.g., X-Custom-Header, Content-Length).
4. Set the URL condition: Specify the URL or pattern where this header change should apply (e.g., https://your-api.com/\*).
5. Save the rule.

Once set up, Requestly will inject the Access-Control-Expose-Headers header into all matching responses, allowing your frontend code to access specific headers that are otherwise hidden by browser security policies.