𝗖𝗵𝗿𝗼𝗺𝗲 𝗪𝗼𝗿𝗸𝗲𝗱. 𝗙𝗶𝗿𝗲𝗳𝗼𝘅 𝗪𝗮𝘀 𝗘𝗺𝗽𝘁𝘆.

I saw a strange bug. I opened the same page in two browsers side by side.

In Chrome, everything worked. I saw images, buttons, and data. In Firefox, I saw nothing. I saw empty cards and a message saying "0 results found."

It was the same URL. It was the same build. It was the same machine.

The cause was a bug that is nearly impossible to find during development. The browser was blocking my own API calls. I only developed in the one browser that did not block them.

The problem: The page uses JavaScript to fetch data from a third-party domain (Supabase). Firefox uses Enhanced Tracking Protection. Many users also use ad blockers like uBlock Origin. These tools see the third-party domain and block the request before it even leaves the computer.

The code did not crash. It did not show a red error in the console. The fetch simply returned nothing. My code then showed a fallback "empty state" as instructed. To a casual observer, the page looked fine. It just looked empty.

This bug was invisible for two reasons:

How I fixed it:

I used a reverse proxy to move the request to the trusted side of the line.

Instead of: mysite.com -> xxxx.supabase.co (Third-party / Blocked)

I switched to: mysite.com -> mysite.com/sb-api (First-party / Trusted)

By routing the API through my own domain, the browser thinks the request is part of the site itself. Firefox no longer sees it as a tracker.

Three things to remember if you use this method:

The lesson: Stop assuming "if it works in Chrome, it works."

Test your site in Firefox with strict privacy settings and an ad blocker. That is your real blind spot.

Source: https://dev.to/henry_dan_81513dd35a2f540/chrome-showed-the-data-firefox-showed-nothing-the-api-was-being-blocked-4mpn