Blocked request. This host is not allowed.

Allow the hostname you actually use

Add the hostname to server.allowedHosts. A leading dot covers the domain and every subdomain under it: .example.com allows example.com, foo.example.com and foo.bar.example.com.

export default defineConfig({
  server: {
    allowedHosts: ['app.local', '.example.com'],
  },
})

Why the check exists

Without it, any website you visit could point a domain it controls at 127.0.0.1 and then read your dev server through it — your source code, your .env values, whatever the server serves. That is a DNS rebinding attack. The host check is what stops it, which is why the fix is a list and not a switch.

Do not set it to true

allowedHosts: true disables the check completely and hands that attack back to anyone who can get you to open a page. It shows up in a lot of forum answers because it makes the error disappear. So does deleting your firewall.

// what most answers tell you to do
server: { allowedHosts: true }   // ← any website can now read your dev server

// what to do instead
server: { allowedHosts: ['the-one-host-you-need'] }

Only add hosts whose DNS you control

A hostname is safe to add if you decide which IP it resolves to. Your own domain qualifies. A domain owned by someone else does not, because they can point it at your machine. Never add a top-level domain like .com — anyone can buy a name under it.

Tunnels, containers and reverse proxies

This is where the error usually appears: ngrok, Cloudflare Tunnel, a Docker service name, a Traefik or nginx host in front of Vite. The browser sends that hostname in the Host header, Vite compares it against the list, and rejects it. Add the exact hostname the browser uses — not the IP, not localhost.

server: {
  host: true,                       // listen on the LAN, not just 127.0.0.1
  allowedHosts: ['.ngrok-free.app'] // the hostname the browser sees
}

CI and throwaway environments

When the hostname is only known at runtime, pass it in instead of editing the config.

__VITE_ADDITIONAL_SERVER_ALLOWED_HOSTS=preview-42.internal npm run dev

vite preview has its own list

preview.allowedHosts defaults to server.allowedHosts, so it usually inherits the right value. If you set it explicitly, set it in both places — a build that works in dev and gets blocked in preview is almost always this.

export default defineConfig({
  server:  { allowedHosts: ['app.local'] },
  preview: { allowedHosts: ['app.local'] },
})

One case where it never fires

Over HTTPS the host check is skipped entirely. If the error disappeared after you put TLS in front of the dev server, it was not fixed — it was bypassed.

• Reaching the Vite dev server from anything other than localhostThe Vite dev server binds to localhost only and rejects unknown hostnames, so a second device, a container or a tunnel needs two separate settings: server.host to bind wider, and server.allowedHosts to accept the name being used.
• CORS errors around localhost:5173The Vite dev server only accepts cross-origin requests from localhost, 127.0.0.1 and ::1 by default — anything else has to be allowed explicitly, and setting cors to true opens it to every website.
• Reaching localhost:5173 from your phone or another machineThe dev server listens on localhost by default, so nothing else on the network can reach it — start it with --host (or set server.host) to listen on your LAN address.
• localhost:5173 — the port itselfWhat the address means, common dev ports, and the autocomplete fix.