Nginx proxy_cache_bypass is serving inconsistent cache

I have a nodeJS application with reverse proxy.

This is my desire settings

1. Nginx always maintain a cache copy (source of truth)

2. Client should always revalidate.

3. My application will be able to purge cache with Cache-Purge: true header

My Cache-Control for my served data is

s-maxage=86400 must-revalidate

And my nginx settings for location block is as follow

location / {

    # Start Cache Settings
    # https://www.nginx.com/blog/nginx-caching-guide/

    proxy_cache_key $request_uri;
    proxy_cache my_cache;
    proxy_cache_revalidate on;
    proxy_cache_use_stale error timeout updating http_500 http_502 http_503 http_504;
    proxy_cache_background_update on;
    proxy_cache_lock on;
    add_header X-Cache-Status $upstream_cache_status;
    proxy_cache_bypass $http_cache_purge;
    
    
    # End Cache Settings
    proxy_set_header X-Forwarded-For $remote_addr;
    proxy_set_header Host $http_host;
    proxy_pass: $upstream
}

My information are cached, however, when I issue the curl to purge the cache

curl http://example.com/abc -H 'Cache-Purge: true' -I

the cache key is cleared, and I am able to see the fresh data when I issue

curl http://example.com/abc

However (the issue...)

When my front-end application (sending GET request with javascript fetch()), it's still returning the old cache (I try setting Cache-Control: no-cache as well.).

While curl request is serving the new cache (after purge).

When I got to my nginx cache folder, I saw 2 different copies of cache, one served to my curl request, one served to my javascript request.

IF I were to request the API directly in the browser, it's also serving the fresh content (curl request).

How can I achieve consistent cache results?

EDIT: nginx could be caching base on my origin headers, how can I ignore that?