I have a SPA that uses NextJS for the frontend, and calls a PHP API. Sometimes a user is able to access the frontend once, but then Cloudflare may require a Managed Challenge, which makes some API calls fail with a 403 error. What's the best way to handle this scenario?
I've tried monitoring axios calls looking for a 403 error and then refreshing the frontend if found, to allow the user to complete the challenge, but the implementation is choppy at best. I can't actually detect the 403 status because of Cloudflare's CORS policy, just a generic network error. And when I refresh based on generic network error alone, sometimes the Managed Challenge doesn't even appear on the frontend, causing the API to still fail and require another couple refreshes to finally prompt it.
I've done a lot of research on this subject and am surprised to not be able to find many solutions for it besides adjusting the rules to be less strict. When I build a PHP-only site there are no issues.
I can't do IP whitelisting because the client IPs are what makes the API calls, and we're getting constantly hit offline with DDoS attacks so we need something.