Occasionally get "Connection lost. Trying to reconnect..." with Cloudflare authentication

[valankar]

Question

I'm running a server accessible via Cloudflare tunnel. It works most of the time, but occasionally I get a "Connection lost. Trying to reconnect..." page that stays forever. Inspecting this in Edge, I see a lot of syntax errors and Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.. See screenshot attached.

Any idea what may be going wrong here? I suspect it has something to do with Cloudflare caching, but I'm not sure why it works most of the time and occasionally does this. Thanks.

[rodja]

That is really tricky to debug. Does it also happen with a very simple "hello world" NiceGUI example? Does it work without Cloudflare? Maybe the Cloudflare logs or the server logs can provide more insight. To activate uvicorn server logging pass uvicorn_logging_level='info' to ui.run.

[valankar]

It works fine when I connect directly to the port bypassing Cloudflare. It also starts working when I do a 'Purge Cache' at Cloudflare, then a shift-reload of my app. It definitely seems related to Cloudflare but I can't quite understand what is causing it. Why would the wrong MIME type of text/html ever be served like that for js files?

[valankar]

Ok seems there is some Cloudflare issue here likely unrelated to NiceGUI. Found a bunch of similar posts:

https://community.cloudflare.com/search?q=wrong%20MIME

[valankar]

Just to follow up, I finally figured out what the issue was here. Looking at:

nicegui/examples/authentication/main.py

Line 30 in 1e77878

if not request.url.path.startswith('/_nicegui') and request.url.path not in unrestricted_page_routes:

I saw that /_nicegui is bypassed in the authentication example. I had to set this up similarly in Cloudflare Zero Trust.

This link explains how to create a bypass policy:

https://developers.cloudflare.com/cloudflare-one/policies/access/#bypass

You need to create an 'application' to bypass a certain subpath for auth. Some more info on policy inheritance and subpaths:

https://developers.cloudflare.com/cloudflare-one/policies/access/app-paths/#policy-inheritance