Access Control Request Headers

What is access control request headers?

Access-Control-Request-Headers is a request-type header used by browsers that carries information about the various HTTP headers that the client will send in the subsequent request.

The browser determines if a CORS preflight is required whenever a client sends a request to a server.

If a CORS preflight request is required, the browser sends a request with numerous headers attached conveying information about the ensuing request using the HTTP Options method.

One of these characteristics is the variety of headers that the request may contain. This data is stored in the preflight request’s Access-Control-Request-Headers header.

Syntax of access control request headers

Syntax:

Access-Control-Request-Headers: header-name-1, header-name-2, …

Directives of access control request headers

The Access-Control-Request-Headers header accepts a header-name directive. The header-name directive is a comma-separated list of header names that will be attached to the ensuing request.

Access control request headers example

Let us consider an example where the browser sends an XHR request. The following code sends

        const req= new XMLHttpRequest(); 
        
        req.open('POST', 'https://examplepostroute/'); 

        req.setRequestHeader('X-PINGOTHER', 'pingpong'); 

        req.setRequestHeader('Content-Type', 

           'application/x-www-form-urlencoded'); 

        req.onreadystatechange = handler; 

        req.send("id=100"); 

    

The request will include the HTTP headers Content-Type and X-PINGOTHER. Before sending the POST request, the browser will perform a CORS preflight request. The CORS preflight request will include the following header. In this way, the server is made aware of any headers in the client request that follows.

Access-Control-Request-Headers: X-PINGOTHER, Content-Type

Browser compatibility

Written by

Nikhil Anilkumar

DevSecOps Engineer