fix: proxy Laravel Vite assets with CORS

Author: dasomji

README.md

@@ -27,7 +27,8 @@ Use it when your dev server is running on a remote machine and you want to open
 - Prints the HTTPS MagicDNS URL for the current Tailscale device.
 - Supports an explicit `--port` when automatic detection is not possible.
 - Supports `--tailscale-port` when you want the MagicDNS URL to include a specific HTTPS port.
-- Detects Laravel + Vite dev output, exposes both servers, and rewrites Laravel's `public/hot` file to the Tailscale Vite URL.
+- Detects Laravel + Vite dev output, exposes both servers, rewrites Laravel's `public/hot` file to the Tailscale Vite URL, and proxies Vite assets with CORS headers so module scripts can load cross-origin.
+- Avoids overwriting an existing default Tailscale Serve mapping: if `https://<host>` is already serving another project, `lizardtail` chooses the first free `8443+` HTTPS port and prints that URL.
 
 ## Requirements
 
@@ -136,13 +137,13 @@ lizardtail --port 3000 npm run dev
 
 ### MagicDNS URL with an explicit port
 
-By default, Tailscale Serve uses HTTPS port 443, so the URL has no port:
+By default, Tailscale Serve uses HTTPS port 443, so the URL has no port when 443 is free or already points at the same local target:
 
 ```text
 https://my-host.tailabc.ts.net
 ```
 
-If you want a URL with a port, choose the Tailscale HTTPS port separately:
+If port 443 is already serving another project, `lizardtail` automatically chooses the first free `8443+` port so multiple projects can be served at the same time. You can also choose the Tailscale HTTPS port explicitly:
 
 ```bash
 lizardtail --tailscale-port 8450 pnpm dev
@@ -159,8 +160,9 @@ https://my-host.tailabc.ts.net:8450
 Laravel development commands often start both the PHP app server and the Vite asset server. When `lizardtail` sees both, it:
 
 1. exposes the Laravel app server;
-2. exposes the Vite asset server on a separate Tailscale HTTPS port;
-3. writes `public/hot` to the Tailscale Vite URL so Laravel renders assets from the reachable Vite server.
+2. starts a small local proxy in front of Vite that adds CORS headers;
+3. exposes that Vite proxy on a separate Tailscale HTTPS port;
+4. writes `public/hot` to the Tailscale Vite URL so Laravel renders assets from the reachable Vite server.
 
 ```bash
 lizardtail composer run dev
@@ -172,7 +174,7 @@ You can choose the Vite Tailscale port explicitly:
 lizardtail --vite-tailscale-port 8453 composer run dev
 ```
 
-`lizardtail` also sets `__VITE_ADDITIONAL_SERVER_ALLOWED_HOSTS` for the child command when it can read your Tailscale MagicDNS name. If browser assets still fail, your Vite config may also need CORS enabled, for example by running Vite with `--cors`.
+`lizardtail` also sets `__VITE_ADDITIONAL_SERVER_ALLOWED_HOSTS` for the child command when it can read your Tailscale MagicDNS name. The local proxy handles CORS for module scripts loaded from the Vite Tailscale URL.
 
 If your app server lands on a known port and you only want to expose that server, you can force it:
 

src/index.ts

@@ -4,6 +4,7 @@ import { spawn } from "node:child_process";
 import { once } from "node:events";
 import { existsSync, realpathSync } from "node:fs";
 import { writeFile } from "node:fs/promises";
+import { createServer, request as httpRequest } from "node:http";
 import net from "node:net";
 import path from "node:path";
 import process from "node:process";
@@ -373,24 +374,60 @@ async function getTailscaleDnsName(): Promise<string | undefined> {
   return status.Self?.DNSName?.replace(/\.$/, "");
 }
 
+interface TailscaleServeStatus {
+  Web?: Record<string, { Handlers?: Record<string, { Proxy?: string }> }>;
+}
+
+async function getTailscaleServeStatus(): Promise<TailscaleServeStatus | undefined> {
+  try {
+    const { stdout } = await exec("tailscale", ["serve", "status", "--json"]);
+    return JSON.parse(stdout) as TailscaleServeStatus;
+  } catch {
+    return undefined;
+  }
+}
+
+async function getTailscaleServeProxy(port: number): Promise<string | undefined> {
+  const status = await getTailscaleServeStatus();
+  if (!status?.Web) return undefined;
+
+  const suffix = `:${port}`;
+  const webKey = Object.keys(status.Web).find((key) => key.endsWith(suffix));
+  if (!webKey) return undefined;
+
+  return status.Web[webKey]?.Handlers?.["/"]?.Proxy;
+}
+
+function normalizeProxyTarget(target: string): string {
+  return target.replace("http://localhost:", "http://127.0.0.1:").replace(/\/$/, "");
+}
+
+async function resolveTailscaleHttpsPort(target: string, requestedPort?: number): Promise<number | undefined> {
+  if (requestedPort !== undefined) return requestedPort;
+
+  const defaultProxy = await getTailscaleServeProxy(443);
+  if (!defaultProxy || normalizeProxyTarget(defaultProxy) === normalizeProxyTarget(target)) return undefined;
+
+  return chooseTailscaleHttpsPort();
+}
+
 async function chooseTailscaleHttpsPort(excludedPort?: number): Promise<number> {
   const usedPorts = new Set<number>();
+  const status = await getTailscaleServeStatus();
 
-  try {
-    const { stdout } = await exec("tailscale", ["serve", "status"]);
-    for (const match of stdout.matchAll(/https:\/\/[^\s:]+:(\d{2,5})/g)) {
-      const port = validDetectedPort(match[1]);
+  if (status?.Web) {
+    for (const key of Object.keys(status.Web)) {
+      const match = key.match(/:(\d{2,5})$/);
+      const port = match?.[1] ? validDetectedPort(match[1]) : undefined;
       if (port) usedPorts.add(port);
     }
-  } catch {
-    // `tailscale serve status` is advisory. If it fails, still choose a reasonable default.
   }
 
   for (let port = 8443; port <= 8999; port += 1) {
     if (port !== excludedPort && !usedPorts.has(port)) return port;
   }
 
-  throw new Error("could not find an available Tailscale HTTPS port for the Vite server");
+  throw new Error("could not find an available Tailscale HTTPS port");
 }
 
 async function writeLaravelHotFile(viteUrl: string): Promise<string | undefined> {
@@ -402,24 +439,96 @@ async function writeLaravelHotFile(viteUrl: string): Promise<string | undefined>
   return hotPath;
 }
 
+async function startCorsProxy(targetHost: string, targetPort: number): Promise<{ host: string; port: number }> {
+  const server = createServer((incoming, response) => {
+    if (incoming.method === "OPTIONS") {
+      response.writeHead(204, corsHeaders());
+      response.end();
+      return;
+    }
+
+    const upstream = httpRequest(
+      {
+        host: targetHost,
+        port: targetPort,
+        method: incoming.method,
+        path: incoming.url,
+        headers: { ...incoming.headers, host: `${targetHost}:${targetPort}` },
+      },
+      (upstreamResponse) => {
+        response.writeHead(upstreamResponse.statusCode ?? 502, {
+          ...upstreamResponse.headers,
+          ...corsHeaders(),
+        });
+        upstreamResponse.pipe(response);
+      },
+    );
+
+    upstream.on("error", (error) => {
+      response.writeHead(502, corsHeaders());
+      response.end(`lizardtail Vite proxy error: ${error.message}`);
+    });
+
+    incoming.pipe(upstream);
+  });
+
+  server.on("upgrade", (request, socket, head) => {
+    const upstream = net.connect(targetPort, targetHost, () => {
+      upstream.write(`${request.method ?? "GET"} ${request.url ?? "/"} HTTP/${request.httpVersion}\r\n`);
+      for (const [name, value] of Object.entries(request.headers)) {
+        if (value === undefined) continue;
+        upstream.write(`${name}: ${Array.isArray(value) ? value.join(",") : value}\r\n`);
+      }
+      upstream.write(`\r\n`);
+      if (head.length > 0) upstream.write(head);
+      socket.pipe(upstream).pipe(socket);
+    });
+
+    upstream.on("error", () => socket.destroy());
+  });
+
+  await new Promise<void>((resolve, reject) => {
+    server.once("error", reject);
+    server.listen(0, "127.0.0.1", () => {
+      server.off("error", reject);
+      resolve();
+    });
+  });
+
+  const address = server.address();
+  if (!address || typeof address === "string") throw new Error("failed to start Vite CORS proxy");
+
+  return { host: "127.0.0.1", port: address.port };
+}
+
+function corsHeaders(): Record<string, string> {
+  return {
+    "Access-Control-Allow-Origin": "*",
+    "Access-Control-Allow-Methods": "GET, HEAD, POST, PUT, PATCH, DELETE, OPTIONS",
+    "Access-Control-Allow-Headers": "*",
+  };
+}
+
 export async function exposeWithTailscale(host: string, port: number, tailscalePort?: number): Promise<string> {
   await exec("tailscale", ["status"]);
 
   const target = `http://${host}:${port}`;
+  const resolvedTailscalePort = await resolveTailscaleHttpsPort(target, tailscalePort);
+
   try {
-    await exec("tailscale", tailscaleServeCommand(target, tailscalePort));
+    await exec("tailscale", tailscaleServeCommand(target, resolvedTailscalePort));
   } catch (firstError) {
     if (isTailscaleServePermissionError(firstError)) {
-      throw new Error(tailscaleServePermissionHelp(target, tailscalePort));
+      throw new Error(tailscaleServePermissionHelp(target, resolvedTailscalePort));
     }
 
     if (host !== "127.0.0.1" && host !== "localhost") throw firstError;
 
     try {
-      await exec("tailscale", tailscaleServeCommand(String(port), tailscalePort));
+      await exec("tailscale", tailscaleServeCommand(String(port), resolvedTailscalePort));
     } catch (fallbackError) {
       if (isTailscaleServePermissionError(fallbackError)) {
-        throw new Error(tailscaleServePermissionHelp(target, tailscalePort));
+        throw new Error(tailscaleServePermissionHelp(target, resolvedTailscalePort));
       }
       throw fallbackError;
     }
@@ -429,10 +538,10 @@ export async function exposeWithTailscale(host: string, port: number, tailscaleP
   const status = JSON.parse(stdout) as { Self?: { DNSName?: string; TailscaleIPs?: string[] } };
   const dnsName = status.Self?.DNSName?.replace(/\.$/, "");
 
-  if (dnsName) return tailscaleUrl(dnsName, tailscalePort);
+  if (dnsName) return tailscaleUrl(dnsName, resolvedTailscalePort);
 
   const ip = status.Self?.TailscaleIPs?.find((value) => /^\d+\.\d+\.\d+\.\d+$/.test(value));
-  if (ip) return tailscaleUrl(ip, tailscalePort);
+  if (ip) return tailscaleUrl(ip, resolvedTailscalePort);
 
   throw new Error("could not determine this device's Tailscale DNS name or IP");
 }
@@ -494,12 +603,14 @@ export async function main(): Promise<void> {
       }
 
       const appUrl = await exposeWithTailscale(options.host, appPort, options.tailscalePort);
+      const viteProxy = await startCorsProxy(viteHost, vitePort);
       const viteTailscalePort = options.viteTailscalePort ?? (await chooseTailscaleHttpsPort(options.tailscalePort));
-      const viteUrl = await exposeWithTailscale(viteHost, vitePort, viteTailscalePort);
+      const viteUrl = await exposeWithTailscale(viteProxy.host, viteProxy.port, viteTailscalePort);
       const hotPath = await writeLaravelHotFile(viteUrl);
 
       console.error(`lizardtail: serving Laravel via Tailscale: ${appUrl}`);
       console.error(`lizardtail: serving Vite assets via Tailscale: ${viteUrl}`);
+      console.error(`lizardtail: proxying Vite through local CORS proxy: http://${viteProxy.host}:${viteProxy.port} -> ${viteLocalUrl}`);
       if (hotPath) console.error(`lizardtail: wrote Laravel Vite hot file: ${hotPath}`);
       console.error("");
     })().catch((error: unknown) => {

tests/index.test.ts

@@ -136,6 +136,53 @@ exit 1
   }
 });
 
+test("exposeWithTailscale auto-selects a port when default HTTPS already serves another target", async () => {
+  const tempDir = await mkdtemp(path.join(tmpdir(), "lizardtail-test-"));
+  const tailscalePath = path.join(tempDir, "tailscale");
+  const tailscaleLog = path.join(tempDir, "tailscale.log");
+  const originalPath = process.env.PATH;
+
+  await writeFile(
+    tailscalePath,
+    `#!/usr/bin/env bash
+printf '%s\n' "$*" >> "$TAILSCALE_LOG"
+if [ "$1" = "status" ] && [ "$2" = "--json" ]; then
+  echo '{"Self":{"DNSName":"test-host.tailnet.ts.net."}}'
+  exit 0
+fi
+if [ "$1" = "status" ]; then
+  echo 'ok'
+  exit 0
+fi
+if [ "$1" = "serve" ] && [ "$2" = "status" ] && [ "$3" = "--json" ]; then
+  echo '{"Web":{"test-host.tailnet.ts.net:443":{"Handlers":{"/":{"Proxy":"http://127.0.0.1:3001"}}},"test-host.tailnet.ts.net:8443":{"Handlers":{"/":{"Proxy":"http://127.0.0.1:5173"}}}}}'
+  exit 0
+fi
+if [ "$1" = "serve" ]; then
+  echo 'serve ok'
+  exit 0
+fi
+exit 1
+`,
+    { mode: 0o755 },
+  );
+
+  try {
+    process.env.PATH = `${tempDir}${path.delimiter}${originalPath ?? ""}`;
+    process.env.TAILSCALE_LOG = tailscaleLog;
+
+    const url = await exposeWithTailscale("127.0.0.1", 8001);
+
+    assert.equal(url, "https://test-host.tailnet.ts.net:8444");
+    const calls = await readFile(tailscaleLog, "utf8");
+    assert.match(calls, /serve --bg --https 8444 http:\/\/127\.0\.0\.1:8001/);
+  } finally {
+    process.env.PATH = originalPath;
+    delete process.env.TAILSCALE_LOG;
+    await rm(tempDir, { recursive: true, force: true });
+  }
+});
+
 test("exposeWithTailscale explains how to fix Tailscale Serve permission errors", async () => {
   const tempDir = await mkdtemp(path.join(tmpdir(), "lizardtail-test-"));
   const tailscalePath = path.join(tempDir, "tailscale");