White screen error when accessing a website through CDN

Updated at:
Copy as MD

Symptoms

A webpage accelerated by Content Delivery Network (CDN) displays a blank white screen and fails to load.

Causes

White screen errors occur when static resources fail to load. If JavaScript or CSS files cached on CDN nodes return abnormal responses, the browser cannot render the page.

SymptomLikely causeStart with
Page is blank but HTML loadsA cached JS or CSS file returns an unexpected responseStep 1: Compare origin and CDN responses
Page breaks after a CDN configuration changeA CDN feature (URL rewrite, redirect following) interferes with resource requestsStep 2: Check CDN console features
Page breaks after an origin deploymentCDN still serves the old version of a fileStep 3: Refresh the cache

Troubleshooting

Step 1: Compare origin and CDN responses

Load the page directly from the origin server, then load it through CDN. Compare the network requests to identify which resource returns an abnormal response.

Option A: hosts file binding + HAR file comparison

  1. Bind the domain name to the origin IP address in your local hosts file.

  2. Open the page in an incognito browser window and save the network requests as a HAR file.

  3. Remove the hosts file binding so that traffic routes through CDN again.

  4. Open the same page and save a second HAR file.

  5. Compare the two HAR files side by side.

What to look for in the HAR files:

  • Status codes: Look for resources that return 200 from the origin but a different status code (such as 404, 403, or 302) through CDN.

  • Response headers: Compare Content-Type, Content-Length, and cache-related headers. A mismatch in Content-Type (for example, text/html instead of application/javascript) indicates that CDN serves the wrong content.

  • Response body size: A resource with a significantly smaller body through CDN may return an error page instead of the actual file.

Option B: curl --connect-to (quick test)

To compare a single resource without modifying the hosts file, send one request directly to the origin and one through CDN:

# Request directly from the origin server (replace 203.0.113.1 with your origin IP)
curl -svo /dev/null https://example.com/static/app.js --connect-to ::203.0.113.1

# Request through CDN (normal DNS resolution)
curl -svo /dev/null https://example.com/static/app.js

Compare the HTTP status codes and response headers in the two outputs.

Step 2: Check CDN console features

Open the CDN console and review features that alter resource requests:

  • URL rewrite: Verify that no rewrite rule unintentionally redirects or modifies the path of a static resource.

  • Follow 301/302 redirects for origin fetch: When enabled, CDN follows redirects from the origin server during origin fetch. If the redirect target returns unexpected content, the cached response is incorrect. Disable this feature to test whether it resolves the issue. For more information, see Follow 301/302 redirects for origin fetch.

Step 3: Refresh the cache

If the abnormal resource is a cached file on CDN, refresh the cache to force CDN to fetch a fresh copy from the origin server.

Console refresh vs. API forced purge

CDN provides two cache refresh methods. For white screen troubleshooting, use the API method:

MethodBehaviorWhen to use
Console (directory refresh or regex-based refresh)Marks cached content as expired. On the next request, CDN checks the origin. If the file content has not changed but only its response headers have, CDN may continue serving the old content.Routine cache refresh for files whose content has changed on the origin.
Refresh Cache API with Force set to truePurges the content from CDN nodes entirely. CDN fetches and caches a new copy from the origin on the next request.White screen troubleshooting, or any scenario where response headers changed but the file content did not.

Refresh the cache through the API

Call the Refresh Cache API (RefreshObjectCaches) with the following parameters:

  • Set the URL to the affected resource path.

  • Set the Force parameter to true.

This purges the content from CDN nodes, not just marks it as expired.

For more information about how CDN handles cache refresh and prefetch, see CDN cache refresh mechanism.

Solutions

Apply one or both of the following fixes:

  1. Disable Follow 301/302 redirects for origin fetch. If this feature causes the abnormal response, disable it in the CDN console. For configuration details, see Follow 301/302 redirects for origin fetch.

  2. Force-refresh the cache through the API. Call the Refresh Cache API with the Force parameter set to true to purge the affected resource from CDN nodes.

Prevention

Use file versioning for static resources. Deploy each release with a versioned filename (for example, app.v2.js or app.20260216.js) instead of overwriting the same file. Versioned filenames ensure that CDN serves the new file immediately, because the URL is different and no cached copy exists on CDN nodes.