Caching JSON API response with page rules and workers

I’m running on the PRO plan.

I’m trying to cache a GET request that runs on page load and returns a JSON response within my single page application.

The URL of my UI is example.com

The URL of my API is api.example.com

I have a worker that forces any request to example.com/api/ to make a request to api.example.com instead. All API calls from my UI make requests to example.com/api/ instead of request the API URL directly.

I have a page rule setup as follows:

When I visit example.com, the request to the API that my single page application is making is not returning a cache hit. The cf-cache-status value is always BYPASS. However, I can get a cache hit only if I make any of the requests listed below before loading the page directly.

If I visit api.example.com/api/public/users/user-name/ directly in my browser or in postman, I get a cache hit.

If I visit example.com/api/public/users/user-name/ directly in my browser or in postman, I get a cache hit.

What is my issue here? Feels like there it is something related to the worker I have that forces all requests to my API through my UI URL.

How can I get the request made to my API cached when my UI loads and makes the request?

Is there a better way to force API requests to run through a path on my UI?

Am I thinking about caching a JSON response completely wrong?

Many thanks in advance.

This response to a similar question might help you:

Just updating this question - it was actually due to an Authorization header. Since this page is a public facing page, I decided it was ok to remove the Authorization header from my worker that forces proxies the API request through my frontend.