HTTP Headers
Access Control Expose Headers
HTTP Header
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.
Syntax
http
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*.
Example
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:
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:
- Install and open the Requestly Chrome extension. You can find it on the Chrome Web Store.
- Create a new rule: Click on “Create Rule” and choose “Modify Headers” from the list of available rule types.
- 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).
- Set the URL condition: Specify the URL or pattern where this header change should apply (e.g., https://your-api.com/*).
- 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.
Table of Contents
- No headings found.
