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 It Worked on Production But Not Staging

Field Note #139
🔬 Generalized 🟡 Intermediate ⏱ 30 Minutes ✓ Observation from Experience
Your page works perfectly on your live site. You copy the exact same page — same files, same code, nothing changed — onto your staging environment to test something unrelated, and suddenly a feature that depends on fetching a data file just stops working. No edits. No typos. Same everything. Different result.

What’s actually happening
Browsers enforce a rule most people never notice until it bites them: a page is only allowed to freely fetch data from the same website it was loaded from. The moment a page tries to fetch something from a different website — and a staging subdomain counts as different from your main domain, even though they’re both “yours” — the browser checks whether the site being asked for that data has explicitly said “yes, other sites are allowed to read this.” If it hasn’t said so, the browser blocks the request itself, before it even reaches your code.
This is exactly why “same code, different domain” can produce a completely different result. Your production page fetching a file that also lives on production never crosses this boundary at all — everything’s on the same domain, so there’s nothing to block. The instant you load that same page from a staging domain instead, that one fetch request is now asking a different website for data, and unless that website has explicitly granted permission, the browser shuts it down.

How to tell the difference
Open DevTools, go to the Console tab, and reload the failing page. A blocked request like this produces a very specific, readable message — something explicitly mentioning being “blocked by CORS policy” and naming the two different origins involved. If you see that exact phrase, this is what’s happening, not a bug in the file or the fetch code itself.

The fix
The website hosting the file needs to explicitly grant permission to the other domain trying to read it. This is done at the server level — adding a rule that tells the server “requests from this specific other domain are allowed to read this file.” It’s worth being specific about exactly which domains are allowed, rather than opening it up to any website whatsoever, since that permission is otherwise a standing, unscoped door left open.

How to avoid it next time
Any time a feature involves one page fetching data that lives on a different domain or subdomain — including a staging environment testing something that normally only runs on production — it’s worth checking whether that’s actually a cross-domain request before assuming the code itself is broken. If it is, permission needs to be granted at the server level; no amount of fixing the JavaScript will get around a browser-level block.

Tagged in :

More from the field