From 225c486a52ece9c81ce21c0be24990bb619be192 Mon Sep 17 00:00:00 2001
From: AJ Slater <aj@slater.net>
Date: Mon, 11 May 2026 20:20:50 -0700
Subject: [PATCH] fix(dev): make Vite dev server reachable from LAN browsers

Three coupled issues prevented browsing the dev server from a second
machine on the LAN.

bin/dev-server.sh
- Drop ``export VITE_HOST=localhost`` default. It overrode Django's
  ``_vite_dev_server_host()`` auto-derivation, so even with mDNS
  resolution working, django-vite rendered ``<script
  src="http://localhost:5173/...">`` and LAN browsers tried to load
  the bundle from their own loopback.

frontend/vite.config.js
- ``server.cors.origin``: Vite 6+ defaults to a regex matching only
  ``localhost`` / loopback origins. Cross-origin fetches from the
  Django dev server (``http://<host>:9810``) to the Vite dev server
  (``http://<host>:5173``) returned ``Vary: Origin`` without
  ``Access-Control-Allow-Origin`` and the browser blocked the
  scripts. Mirror ``allowedHosts`` into a port-agnostic CORS regex.
- ``server.hmr.host``: with ``server.host: true``, Vite bakes
  ``localhost`` into the HMR client's ``directSocketHost`` /
  ``socketHost`` strings. LAN browsers then opened the HMR
  WebSocket against their own loopback and got
  ERR_CONNECTION_REFUSED. Set ``hmr.host`` to the same
  ``VITE_HOST`` / mDNS-mangled hostname Django uses for the
  ``<script src>`` so the embedded URL agrees with where the page
  actually loaded the module from.
- Include the resolved host in ``allowedHosts`` so an explicit
  ``VITE_HOST=...`` override (not matching ``os.hostname()``) is
  also trusted by Vite's host-header check and the new CORS regex.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 bin/dev-server.sh       |  2 --
 frontend/vite.config.js | 41 ++++++++++++++++++++++++++++++++++++++++-
 2 files changed, 40 insertions(+), 3 deletions(-)

diff --git a/bin/dev-server.sh b/bin/dev-server.sh
index d8c3b6648..265d116de 100755
--- a/bin/dev-server.sh
+++ b/bin/dev-server.sh
@@ -12,8 +12,6 @@ export PYTHONWARNINGS=always
 #export CODEX_THROTTLE_OPDS=10
 #export CODEX_THROTTLE_USER=10
 export DJANGO_SETTINGS_MODULE=codex.settings
-# If I need to test mobile, then use only ONE network interface (wifi) and comment out this variable
-export VITE_HOST=localhost
 #uv run python3 -X tracemalloc ./codex/run.py
 #uv run righttyper --all-files --overwrite codex/run.py
 uv run python3 ./codex/run.py
diff --git a/frontend/vite.config.js b/frontend/vite.config.js
index ea89d8753..66933fd60 100644
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.js
@@ -57,9 +57,46 @@ const config = defineConfig(({ mode }) => {
     rawHost.includes(".") && !rawHost.endsWith(".local")
       ? `${rawHost.split(".")[0]}.local`
       : rawHost;
+  // Mirror Django's ``_vite_dev_server_host``: explicit
+  // ``VITE_HOST`` override, otherwise the mDNS-mangled hostname.
+  // This is the name baked into the @vite/client's ``serverHost``
+  // and ``directSocketHost`` strings, so it must be resolvable
+  // from *every* browser that loads the page — not just the host.
+  // Without setting ``server.hmr.host`` Vite falls back to
+  // ``localhost`` whenever ``server.host`` is ``true``, which makes
+  // LAN browsers connect to their own loopback and get
+  // ERR_CONNECTION_REFUSED for HMR + module fetches.
+  const HMR_HOST = process.env.VITE_HOST?.toLowerCase() || mDNSHost;
   const ALLOWED_HOSTS = DEV
-    ? [...new Set([rawHost, mDNSHost, "localhost", "127.0.0.1", "[::1]"])]
+    ? [
+        ...new Set([
+          HMR_HOST,
+          rawHost,
+          mDNSHost,
+          "localhost",
+          "127.0.0.1",
+          "[::1]",
+        ]),
+      ]
     : [];
+  // Vite 6+ defaults ``server.cors.origin`` to a regex matching
+  // only loopback / ``.localhost`` hosts. When the Django dev
+  // server is browsed at e.g. ``http://hooloovoo.local:9810``, the
+  // browser sends ``Origin: http://hooloovoo.local:9810`` while
+  // fetching ``<script src="http://hooloovoo.local:5173/...">``.
+  // That origin doesn't match Vite's default regex, so the dev
+  // server replies with ``Vary: Origin`` but no
+  // ``Access-Control-Allow-Origin`` and the script load is blocked.
+  // Mirror ``allowedHosts`` into a CORS regex that accepts any
+  // port so browser-side fetches from Django (or anything else on
+  // the same hostname) work.
+  const reEscape = (s) => s.replace(/[$()*+.?[\\\]^{|}]/g, "\\$&");
+  const CORS_ORIGIN = DEV
+    ? // eslint-disable-next-line security/detect-non-literal-regexp
+      new RegExp(
+        `^https?://(${ALLOWED_HOSTS.map(reEscape).join("|")})(?::\\d+)?$`,
+      )
+    : undefined;
   let publicPathPrefix = "window.CODEX.APP_PATH";
   if (PROD) {
     publicPathPrefix += ".substring(1)";
@@ -172,6 +209,8 @@ const config = defineConfig(({ mode }) => {
     server: {
       host: true,
       allowedHosts: ALLOWED_HOSTS,
+      cors: { origin: CORS_ORIGIN },
+      hmr: { host: HMR_HOST },
       strictPort: true,
     },
     test: {