Chromeでは動いた。Firefoxでは動かなかった。
2つのブラウザで同じページを並べて表示してみました。
Chromeでは：ページは完璧に動作していました。画像、ボタン、そして完全な結果リストが表示されていました。
Firefoxでは：ページは空でした。画像のないプレースホルダーのカードが表示され、「結果は0件です」というメッセージが出ていました。
コードは同じ。URLも同じ。サーバーも正常でした。
問題はブラウザでした。
Firefoxには「強化型トラッキング防止」機能があります。また、多くのユーザーが uBlock Origin のようなツールを使用しています。これらのツールは、トラッカーであると判断したドメインへのリクエストをブロックします。
私のアプリは Supabase のドメインからデータを取得していました。Firefoxにとって、そのドメインはサードパーティのトラッカーのように見えたのです。ブラウザは、リクエストがマシンから送信される前にブロックしてしまいました。
fetch が失敗したため、コードはフォールバック状態を表示しました。クラッシュしたわけでも、コンソールにエラーが出たわけでもありません。ただ、空のページが表示されただけでした。
これにより、二重の盲点が生じました：
- 開発用のブラウザ（Chrome）では完璧に動作していました。バグに気づくことはありませんでした。
- アナリティクスも同じドメインを使用していました。コンテンツが見られなかったユーザーは、トラッキングもされませんでした。彼らは「不可視」の状態だったのです。
私は、サードパーティへのリクエストからファーストパーティへのリクエストに変更することで、これを解決しました。
ベンダーのドメインを直接呼び出す代わりに、リバースプロキシを使用しました。APIを自分のドメイン経由でルーティングしたのです。
Before: mysite.com が xxxx.supabase.co を呼び出す (ブロックされる) After: mysite.com が mysite.com/sb-api を呼び出す (信頼される)
これで、ブラウザは同一オリジンリクエストとして認識します。データ呼び出しをサイト自体の一部として扱います。
もし同様の問題に直面したら、次の3つのことを覚えておいてください：
• Websocket に注意する。単純なパスの書き換えは、リアルタイム接続を壊す可能性があります。 • 認証ストレージキーを固定する。URLを変更すると、ブラウザがログインセッションを保存する方法が変わる可能性があります。 • コンテンツをプリレンダリングする。ページを JavaScript だけに完全に依存させないでください。ブラウザがスクリプトをブロックしても、ユーザーが HTML 内のコアコンテンツを見られるようにしておくべきです。
「Chrome で動くなら、全員に対して動くはずだ」という思い込みはやめましょう。プライバシー拡張機能をオンにした状態でテストしてください。