How Axios Handles CORS Preflight Caching Headers
This article explains how the Axios HTTP client interacts with
Cross-Origin Resource Sharing (CORS) preflight caching headers,
specifically Access-Control-Max-Age. When running in a
browser, Axios does not directly process, store, or manage CORS
preflight cache headers; instead, it delegates all CORS preflight
operations and caching entirely to the browser's internal networking
engine. In server-side environments like Node.js, CORS preflight
mechanisms do not apply at all.
The Browser's Role in Preflight Caching
When you make a cross-origin request using Axios that is not
considered a "simple request" (such as a request with custom headers, a
PUT/DELETE method, or a
Content-Type of application/json), the browser
automatically initiates a preflight OPTIONS request before
sending the actual request.
The server can respond to this preflight request with the
Access-Control-Max-Age header. This header specifies the
number of seconds the preflight response can be cached by the
client:
Access-Control-Max-Age: 86400
The browser's networking layer intercepts this header and stores the
permission result in its internal CORS preflight cache. For subsequent
matching requests within that timeframe, the browser skips the
OPTIONS request and immediately sends the actual HTTP
request.
Why Axios Has No Direct Control
Axios is an abstraction layer built on top of the browser's native
XMLHttpRequest or fetch APIs. Because CORS is
a security mechanism enforced by web browsers:
- Invisibility to JavaScript: The browser does not
expose preflight
OPTIONSrequests or responses to JavaScript. Axios never sees theAccess-Control-Max-Ageheader returned in a preflight response. - No Custom Storage: Axios maintains no internal cache for CORS permissions. It relies exclusively on the browser's implementation.
- No Override Capability: You cannot force Axios to
bypass or manipulate the CORS preflight cache through its configuration,
headers, or interceptors. Any limits on caching duration (such as
browser-enforced maximum caps on
Access-Control-Max-Age) are determined entirely by the user's browser.
Axios in Node.js
When Axios is used in a Node.js environment, CORS does not exist.
CORS is strictly a browser-enforced security protocol designed to
protect users from cross-origin data leakage. Node.js sends HTTP
requests directly to the target server without initiating preflight
OPTIONS requests, ignoring any
Access-Control-Max-Age headers sent in server
responses.