Starting a website?

Purpose-Built Templates

ZU2B Blueprints

Business in a Box

Reference

ZU2B Pulse™

See what visitors experience before they leave — paste any public URL and get a plain-English performance report in seconds.

Scan Your URL Free
FAQ • Support

Why a Page Loads Fine Directly But Fails When Fetched

Field Note #144
🔬 Generalized 🔴 Advanced ⏱ 30 Minutes ✓ Observation from Experience
You paste a URL straight into your browser’s address bar. It loads perfectly — real content, right there. But the exact same URL, requested by your own page’s JavaScript instead of typed in directly, fails every time. Same file. Same server. Same everything, as far as you can tell. Different result.
 
What’s actually happening
When your browser loads a URL directly, it has its own caching logic working quietly in the background, designed to be forgiving — if the server says “you already have the latest version of this, nothing’s changed,” the browser just quietly hands you what it already has, and everything looks like a normal, successful load.
JavaScript’s fetch() doesn’t get that same forgiving treatment. If the server responds with that exact “nothing’s changed, use what you already have” signal (an HTTP 304 status), fetch() can report that response as not okay — which is a completely valid, correct response from the server’s point of view, but code written to treat anything other than a standard “success” status as an error will treat it as a failure and stop right there.
So the server didn’t do anything wrong, and the file isn’t broken. The gap is entirely in how two different things — a normal page load versus a JavaScript-initiated request — handle the exact same server response differently.
 
How to tell the difference
Open your browser’s DevTools, go to the Network tab, and reload the page that’s failing. Find the specific failed request and check its actual status code. If it reads 304 rather than a clear error code like 404 or 500, that’s the signature — a “not modified” response being treated as a failure by the requesting code, not an actual problem with the file or the server.
 
The fix
Tell the fetch request to skip the browser’s caching logic entirely, so the server never has a chance to reply with “nothing’s changed” in the first place — it always sends the real content fresh, with a normal success status. In practice, this means adding a cache-bypassing option to the fetch call itself, forcing a full, uncached request every time.
 
How to avoid it next time
If you’re fetching a file that changes occasionally (not something that needs to be blazing-fast on every single page load), it’s worth deciding up front whether you want caching behavior at all. For small files where a fresh fetch is cheap, skipping the cache entirely — every time — is simpler and more predictable than trying to handle a “not modified” response correctly in your own code.

Tagged in :

More from the field