So I’m not really concerned about the Cloudflare cache since, as you said, HTML isn’t cached anyway by default. The problem is that I need to explicitly set the Cache-Control response header, because if left out the browser will apply its default caching rules, which means sometimes loading the document from disk (which is a disaster for an SPA). So in other words, it’s the browser cache, not the CF cache that I’m having problem with.
When you tested it, did it actually set the Cache-Control header? In my case, it sets the expected CF headers (dynamic caching and whatnot), but doesn’t include the Cache-Control header at all no matter what I set the Browser TTL field to.
As a side note, I want to point out that I eventually managed to solve the actual caching issue by using a Transform Rule with the same condition as above to manually set the header. That said, I’m still interested in understanding why I can’t do the same thing with a Cache Rule.
I wonder if this old documented limitation (refers to Page Rules) still applies to Cache Rules:
Nevertheless, the value you set via Page Rule will be ignored if Cache-Control: max-age is higher. In other words, you can override to make browsers cache longer than Cloudflare’s edge but not less. Browser Cache TTL · Cloudflare Cache (CDN) docs
But I tried several combinations of rule order (the one that sets Cache Eligible for the HTML pages, with the one you are suggesting to override origin Cache-Control) and even different Browser TTL settings, such as override to increase the time or decrease the time (but still cache), and nothing worked as far as changing the Cache-Control set by the origin.
I was going to suggest Transform Rules as a workaround, and I’m glad you’ve already tested it. So, for the while, use TR while I’ll pass that on to Cloudflare Team for further investigation.