HTTP Headers
Access Control Allow Headers
The HTTP Access-Control-Allow-Headers
response header is used in response to a preflight request to specify the HTTP headers permitted during the actual request.
This header is necessary if the preflight request includes Access-Control-Request-Headers
.
Syntax
Access-Control-Allow-Headers: <header-name>
Access-Control-Allow-Headers: <header-name>, <header-name>
Access-Control-Allow-Headers: *
Directives
Directives
The following directives specify how request headers are handled in the context of certain operations. These directives help control access and security by defining the headers that are allowed or matched during requests.
<header-name>
The name of a supported request header. Multiple headers can be specified, separated by commas. This directive determines which headers are acceptable in incoming requests.
* (wildcard)
This wildcard indicates any header. When used in requests without credentials, the asterisk *
acts as a special value to allow all headers, as long as there are no HTTP cookies or authentication information attached. For requests with credentials, *
is treated as a literal header name without any special meaning. It’s important to note that the Authorization header does not accept wildcards and must be explicitly listed if needed.
Example
Implementing a custom header
Below is an example of an Access-Control-Allow-Headers
header. It indicates that a custom header named X-Custom-Header
is supported by CORS requests to the server, in addition to the CORS-safelisted request headers.
Access-Control-Allow-Headers: X-Custom-Header
Supporting multiple headers
This example shows Access-Control-Allow-Headers
when it specifies support for multiple headers.
Access-Control-Allow-Headers: X-Custom-Header, Upgrade-Insecure-Requests
Bypassing additional restrictions on CORS-safelisted headers
Although CORS-safelisted request headers are always allowed and don’t usually need to be listed in Access-Control-Allow-Headers
, listing them anyway will circumvent the additional restrictions that apply.
Access-Control-Allow-Headers: Accept
Handling preflight requests
Let’s look at an example of a preflight request involving Access-Control-Allow-Headers
.
First, the preflight request is an OPTIONS
request that includes some combination of the three preflight request headers: Access-Control-Request-Method
, Access-Control-Request-Headers
, and Origin
.
The preflight request below tells the server that we want to send a CORS GET
request with the headers listed in Access-Control-Request-Headers
(Content-Type
and X-Requested-With
).
OPTIONS /resource/foo
Access-Control-Request-Method: GET
Access-Control-Request-Headers: content-type,x-requested-with
Origin: https://foo.bar.org
If the CORS request indicated by the preflight request is authorized, the server will respond to the preflight request with a message that indicates the allowed origin, methods, and headers. Below, we see that Access-Control-Allow-Headers
includes the headers that were requested.
HTTP/1.1 200 OK
Content-Length: 0
Connection: keep-alive
Access-Control-Allow-Origin: https://foo.bar.org
Access-Control-Allow-Methods: POST, GET, OPTIONS, DELETE
Access-Control-Allow-Headers: Content-Type, x-requested-with
Access-Control-Max-Age: 86400
If the requested method isn’t supported, the server will respond with an error.
How to Modify Header using Requestly
Requestly is a handy Chrome extension that lets you change HTTP headers, including the Access-Control-Allow-Headers header. This can be very helpful when you want to control which headers are allowed in cross-origin requests while developing or testing your web applications. Steps to Modify the Access-Control-Allow-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-Allow-Headers.
- In the “Header Value” field, enter the headers you want to allow (e.g., Content-Type, Authorization).
- 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 configured, Requestly will add or change the Access-Control-Allow-Headers header in all matching responses, helping you test and control which custom headers are accepted in cross-origin HTTP requests.
Table of Contents
- No headings found.