Diagnosing Intermittent White‑Screen Issues Caused by Nginx Proxy and HTTP Connection Mismatch

Investigation Process

The author noticed occasional white‑screen occurrences on the homepage of an online system. Directly accessing each backend server bypassed the issue, while accessing the site through the Nginx‑proxied domain reproduced the white screen. By opening two browser windows—one normal and one white‑screened—and using the developer console, the author discovered that the failing request returned an HTTP 302 redirect for a JavaScript bundle, whereas the successful request returned 200.

Further inspection showed that one of the backend servers stored a different version of the Vue‑generated JS file (the filename contained a unique hexadecimal hash). The mismatched bundle caused the 302 redirect, leading to the white screen. Updating the frontend resources on the problematic server fixed the issue.

Why the White Screen?

The article explains the underlying mechanism: browsers first fetch the HTML page, then request linked resources (JS, CSS, images) over the same TCP connection when HTTP 1.1 keep‑alive is used. Nginx, however, was operating with HTTP 1.0, creating separate short connections for each request. Consequently, the HTML request and the resource requests could be routed to different backend servers. When the HTML was served by a server whose JS bundle version differed from the one selected for the resource request, the browser failed to load the correct script, resulting in a white screen.

By bypassing Nginx and using the internal server address, both HTML and resources were handled by the same server, avoiding the version mismatch. The root cause was identified as Nginx’s use of HTTP 1.0, which prevented persistent connections and caused inconsistent server selection.

Key technical details include the use of the keep-alive mechanism in HTTP 1.1 and the impact of load‑balancing decisions on frontend asset consistency.