openedx / openedx/frontend-platform
Axios v1 Upgrade: CORS Error Triggered by useCache: true Option
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 39
- Forks
- 91
- Avg merge
- 2m
- Merged PRs (30d)
- 1
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.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by tracing the frontend-platform axios integration and the useCache: true option. Reproduce the CORS failure, determine whether the scope is a deprecation warning or another change, and verify the chosen behavior against requests that use client-side caching.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 30/100