I’m having a big problem (2 entire days trying to solve) with AJAX requests (xhr) and Cloudflare cache.
I’m caching a JSON API with Cloudflare, everything works good from browser URL and from Postman, but with AJAX from my JS script, Cloudflare is returning an purged cache version of the file.
The JSON is update (was purged from Cloudflare API), acessing the URL directly from browser it returns the expected content, but from AJAX it returns an older version.
I’ve tried many things with page rules, but nothing works as I want
I’m sure that I’m testing the same URL, and I’m sure that it’s not the browser cache (checked thousand times at console).
My cache header:
Cache-Control: public, max-age=5, s-maxage=2592000, stale-if-error=31536000
Other note, when I change the cache level to bypass the response with AJAX is the expected, but when I turn back to cache everything the problem happens again (only with AJAX).
Does anyone knows why is it happening? Some idea to solve (if there is a way to solve)? Thanks a lot!
Another note, I’ve also tried to use cache level ignore query string, using .js extension instead of .json and sending AJAX with timestamp on query string to prevent browser cache, but still not working, Cloudflare still returning an older response.
The unique way I found is to not cache, but it’s not a good solution to me.
I’m confused cause the response for Postman is always as expected, the problem is only with ajax request, it does not make sense to me.
This is beyond me, but have you opened a Support ticket?
Hey @leomp12, you didn’t provide a URL for the Community to review, which is generally helpful If you don’t want to, that’s fine too, though then you really would need to open a Support ticket for agents to review: login to Cloudflare and then contact Cloudflare Support
edit: actually a URL may not be enough for Community folks to troubleshoot with seeing as how it’s returning the expected content…
It could be your ajax call is using POST. If you’re not actually posting data, use GET.
If it’s still not working, enter here your app’s URL and let us know how to duplicate the issue.
I’m using GET and without custom headers, so it’s a simple xhr CORS, without preflight request.
I’ve not created a ticket cause I did not know how , and I’ve not posted the URL here because I was trying with different ways.
One example URL is here:
But, as you can see on header, I’ve changed the Cache Control:
public, max-age=9, s-maxage=5, must-revalidate, stale-if-error=86400
This way worked, it’s not so good as my first ideia, but works, AJAX responses are always updated (such as URL direct access).
With “public, max-age=5, s-maxage=2592000, stale-if-error=31536000”, the idea was purge the cache via API when the resource is updated, by that way the response would always come from Cloudflare cache.
With “public, max-age=9, s-maxage=5, must-revalidate, stale-if-error=86400” the response almost always comes from my origin server, and it’s not necessary to use Cloudflare API to purge, the response comes from Cloudflare cache only when my server is down, so it does the most important thing (availability), but the response it’s obviously a little bit slower.
OK @sdayman, thanks.
Thank you too, @anon13938084 and @jules.
For now I’m satisfied with the solution I found, at least I was able to use the Cloufare stale cache and solve the problem with AJAX.
For a long time I was thinking that it was a problem with browser cache, but bypass the Cloudflare cache worked, then I found that a small maxage together with must-revalidate, works too, and it’s better then bypass because I can use stale-if-error.
This topic was automatically closed after 14 days. New replies are no longer allowed.