HTTP Headers

Access Control Request Headers

HTTP Header

The HTTP Access-Control-Request-Headers request header is utilized by browsers when sending a preflight request to inform the server about the HTTP headers the client might include in the actual request, such as with fetch() or XMLHttpRequest.setRequestHeader(). The server responds with the corresponding header, Access-Control-Allow-Headers, to specify which headers are permitted.

Header type: Request header

Forbidden request header: Yes

Syntax

Access-Control-Request-Headers: <header-name>,<header-name>,...

Directives

<header-name>

A sorted list of unique, comma-separated, lowercase HTTP headers that are included in the request.

Example

Access-Control-Request-Headers: content-type,x-pingother

How to Modify Header using Requestly

Requestly is a powerful Chrome extension that allows you to modify HTTP headers, including the Access-Control-Request-Headers header. This is especially useful for testing how your application handles preflight CORS requests during development or debugging. Steps to Modify the Access-Control-Request-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-Request-Headers.
- In the “Header Value” field, enter your desired header names to be allowed (e.g., Authorization, Content-Type).
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 modified Access-Control-Request-Headers header into all matching preflight requests, helping you test how your server responds to specific headers being requested for cross-origin resource sharing. Modifying the Access-Control-Request-Headers header is helpful because it lets you simulate different preflight request scenarios, ensuring your server correctly accepts or rejects requests based on the headers your client wants to send. This helps prevent CORS-related errors in your web applications.