# How CORS preflight caching can reduce browser latency and server requests

DevFeed: [How CORS preflight caching can reduce browser latency and server requests](<https://devfeed.tech/articles/cache-your-cors-for-performance-profit-19045.md>)

Original publisher: [Read original article](<https://httptoolkit.com/blog/cache-your-cors/>)

Author: HTTP Toolkit; Tim Perry

Published: 2021-02-17T17:00:00Z

Content type: tutorial

Language: en

Sources: [HTTP Toolkit](<https://devfeed.tech/sources/http-toolkit.md>)

Topics: [Cross-origin resource sharing (CORS)](<https://devfeed.tech/topics/cors.md>), [Caching](<https://devfeed.tech/topics/caching.md>), [API](<https://devfeed.tech/topics/api.md>), [Serverless](<https://devfeed.tech/topics/serverless.md>), [browser](<https://devfeed.tech/topics/browser.md>)

Tags: [api](<https://devfeed.tech/tags/api.md>), [backend](<https://devfeed.tech/tags/backend.md>), [browser](<https://devfeed.tech/tags/browser.md>), [cache](<https://devfeed.tech/tags/cache.md>), [caching](<https://devfeed.tech/tags/caching.md>), [cors](<https://devfeed.tech/tags/cors.md>), [latency](<https://devfeed.tech/tags/latency.md>), [performance](<https://devfeed.tech/tags/performance.md>), [request](<https://devfeed.tech/tags/request.md>), [serverless](<https://devfeed.tech/tags/serverless.md>)

## AI overview

This tutorial explains how browser CORS preflight requests work and why their default caching behavior can add latency, server load, and costs, especially for serverless APIs. It discusses which cross-origin requests trigger preflights and how caching can reduce repeated OPTIONS requests.

## Source excerpt

CORS is a necessity for many APIs, but basic configurations can create a huge number of extra requests, slowing down every browser API client, and sending unnecessary traffic to your backend. This can be a problem with a traditional API, but becomes a much larger issue with serverless platforms, where your billing is often directly tied to the number of requests received, so this can easily double your API costs. All of this is unnecessary: it's happening because you don't know how caching works for CORS requests. Let's fix that. What are CORS preflight requests? Before your browser makes any request that crosses origins (e.g. example.com to api.example.com) if it's not a simple request then the browser sends a preflight request first, and waits for a successful response before it sends the real request. This preflight request is an OPTIONS request to the server, describing the request the browser wants to send, and asking permission first. It looks something like: OPTIONS /v1/documents Host: https://api.example.com Origin: https://example.com Access-Control-Request-Method: PUT Access-Control-Request-Headers: origin, x-requested-with The server has to respond with headers that confirm it's happy to accept the request, and the browser will wait to send the real request until this happens. If you want to check exactly how these CORS rules work, and how you should respond, play around with Will it CORS? to test out the possibilities. In practice, almost all cross-origin API requests will require these preflight requests, notably including: Any request with a JSON or XML body Any request including credentials Any request that isn't GET, POST or HEAD Any exchange that streams the request or response body Use of any headers other than Accept, Accept-Language, Content-Language and Content-Type Why is this bad? Each of these requests blocks your real request for at least the round-trip time to your server. OPTIONS requests aren't cacheable by default, so your CDN won't usua