Cloudflare bot caching issue

Question

I am using a Cloudflare worker to get data from a GitHub repository and cache it. The worker appears to cache the files and send them to the user, but in some weird order.

GitHub Repo

<h1>Rocket</h1>
<img src=rocket.png>
<img src=rocket2.png>

Response

code for caching

"r" is the response from GitHub; "req" is event.request

let cache = caches.default;
var cacheData = {body: req.body,method: req.method}

To add to cache

await cache.put(new Request(req.url,cacheData), await fetch(r.download_url));

To get cache (technically on top)

var pCache = await cache.match(new Request(req.url,cacheData))
if(!!pCache)return pCache

Any ideas for what would cause this?

Answer 1

Instead of using Cache API you could also allow CF handle caching by passing caching settings via cf to fetch(...) .

export default {
  fetch(req, env, ctx) {
    const url = new URL(req.url);
    const targetUrl = `https://github.com${url.pathname}${url.search}`;

    return fetch(targetUrl, {
      cf: {
        cacheTtl: 1209600,
        cacheEverything: true
      }
    });
  }
}

Answer 2

The issue was due to multiple requests to a certain file. Instead of using fetch, I used the cache.