I have this simple API: https://apicachetest.servitr.io/api/test, it returns a timestamp and instructs the browser and cloudflare to cache the response. Nothing special about it. After some refreshes, I get a cf-cache-status: HIT. The API have CORS enabled for these two hosts:
When I open a chrome and fire a GET straight to the API, i get two things:
- cf-cache-status: HIT
- Vary: Accept-Encoding
All what to expect with CORS and Cloudflare.
I also have a simple Angular SPA on https://www.servitr.io. It is a template SPA, but I have set up a page to do XHR to the API in question: https://www.servitr.io/sigsys-data. To test this, you need to open this URL in another browser. I think it is because of max-age and CORS, else you might get a CORS error in the console.
If you open https://www.servitr.io/sigsys-data in Edge, you get a XHR to the same API. You get the same Cloudflare caches response as when calling directly, but the request made has these two things:
- cf-cache-status: BYPASS
- Vary: Accept-Encoding, Origin
I understand why the vary on origin, it is because of CORS, and i get it. I also do understand why i get the same cached response as when calling the API directly, because I have instructed Cloduflare to. What I don’t understand is why i get the BYPASS when Cloudflare clearly delivers a cached response to me. Is this because of CORS as well? Or has it something to do with Cloudflare only supports Accept-Encoding as vary header (https://support.cloudflare.com/hc/en-us/articles/217343117-What-headers-can-I-vary-the-cache-on-), but gets Origin as well, and kind of telling me “the wrong story”, eg “I am going to bypass this because of vary origin, but for Accept-Encoding I have a cached result”, and then proceed to only telling me the first part of how it found the resource?
I know this is a tiny detail. I do get what I want: a cached response, but I need to understand this, because I am going to use Cloudflare a lot in the next couple of years