🎉 Requestly joins BrowserStack to build the future of application testing. Read more

HTTP Headers

Access Control Allow Headers

HTTP Header

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

http
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.

http
Access-Control-Allow-Headers: X-Custom-Header

Supporting multiple headers

This example shows Access-Control-Allow-Headers when it specifies support for multiple headers.

http
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.

http
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).

http
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
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:

  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-Allow-Headers.
    • In the “Header Value” field, enter the headers you want to allow (e.g., Content-Type, Authorization).
  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 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.