Axios v1 Upgrade: CORS Error Triggered by useCache: true Option #764
Description
A recent upgrade to axios v1 in frontend-platform caused a CORS error for what appears to be single API call (as far as we have been able to tell) in Enterprise Learner Portal MFE, though it's largely unclear whether it potentially impacts more APIs than this one.
The JavaScript error associated with the failed request suggests the following:
request header field cache-control is not allowed
It was identified that the MFE calling this affected API was using the opt-in useCache: true option, to enable client-side caching on responses to this API for performance optimizations and preventing loading states where possible.
The CORS error was resolved by removing the useCache: true option, which results in the pre-flight OPTIONS request to pass the CORS check and resolve the response successfully.
If running into CORS errors on requests due to the above error, check if you're using useCache: true; if so, the recommendation is to opt out of frontend-platform's client-side caching baked into the axios HTTP client, in favor of relying on other, more widely accepted means of client-side caching (e.g., with @tanstack/react-query).
We may consider adding a deprecation warning when useCache: true is used, as a "use-at-your-own-risk" sort of warning but likely to also mention its eventual deprecation.