Why Localhost Breaks on VPN

Localhost (127.0.0.1) should always be local—that's the whole point. But some VPNs intercept all traffic, including localhost.

• •

  DNS-based VPNs redirect "localhost" hostname resolution

• •

  Full-tunnel VPNs intercept all IP traffic

• •

  Port conflicts with VPN services

• •

  "Zero trust" corporate VPNs that inspect everything

Common Symptoms

You'll know VPN is interfering when:

• •

  http://localhost:3000 — connection refused

• •

  127.0.0.1:8080 — timeout

• •

  Local API calls fail from your app

• •

  Database connections (localhost:5432) fail

• •

  Hot reload stops working

Quick Test

1. Start your dev server: npm run dev

2. Confirm it works before VPN connects

3. Connect VPN

4. Try accessing localhost

5. If broken → VPN is interfering

Diagnosing the Problem

# Test basic localhost
curl http://localhost:3000

# Test with IP directly
curl http://127.0.0.1:3000

# Check if port is listening
lsof -i :3000

Fix 1: Use 127.0.0.1 Instead of localhost

Sometimes "localhost" gets redirected by VPN DNS, but the IP address stays local. Try http://127.0.0.1:3000 instead of http://localhost:3000.

Fix 2: Bind to 0.0.0.0

Some dev servers only bind to localhost. Try binding to all interfaces:

# Instead of
npm run dev

# Use
HOST=0.0.0.0 npm run dev

Fix 3: Route Dev Tools Direct with SplitTunnel

The most reliable fix: route your development tools outside the VPN tunnel.

Framework-Specific Notes

Next.js / React

# .env.local
HOST=127.0.0.1
PORT=3000

Node.js / Express

app.listen(3000, '127.0.0.1')

Python / Django / Flask

python manage.py runserver 127.0.0.1:8000

Verifying the Fix

After setting up:

1. Connect your VPN

2. Start your dev server

3. Access localhost in browser

4. Test API calls between services

5. Confirm hot reload works