Reduce Response Latency by Caching Preflight Requests

Netanel Basal
Netanel Basal
Published in
2 min readMar 21, 2022

The browser sends a preflight request before sending any request that crosses origins if it’s not a simple request and waits for a successful response before sending the real request.

A preflight request is an OPTIONS request to the resource on the other origin to determine it’s safe to send the actual request. An example of a real-world use case is when you pass the JWT in the Authorization header:

OPTIONS request with a custom header

The issue is that OPTIONS requests are cacheable for only 5 seconds by default. In other words, we need to wait for one round trip to the backend before we can send the original request, which means a slower response to our clients.

The solution is to set the Access-Control-Max-Age response header:

Access-Control-Max-Age: 7200

It takes the maximum number of seconds the results can be cached. Firefox caps this at 24 hours, while Chrome limits it to two hours.

Follow me on Medium or Twitter to read more about Angular and JS!

--

--

Netanel Basal
Netanel Basal

Written by Netanel Basal

A FrontEnd Tech Lead, blogger, and open source maintainer. The founder of ngneat, husband and father.

Responses (3)