openedx / openedx/frontend-platform

Axios v1 Upgrade: CORS Error Triggered by useCache: true Option

Open
#764 0 comments 0 reactions 0 assignees View on GitHub

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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.