Vite で開発中にホスト名まわりで Blocked request が出たので通るようにしたメモです。

背景

こちら、2026 年 9 月の情報で書いております。

Hono とかで意識的に開いたときはいいんですが Vite で開発サーバーたてたときに、ローカルネットワーク別 PC アクセスしたら Blocked request が出ました。

Blocked request. This host ("～～～～") is not allowed.
To allow this host, add "～～～～" to `server.allowedHosts` in vite.config.js.

・・・あれ？

host: '0.0.0.0' 設定してたんだけど？

ってなったんですが、どうも Host ヘッダー検証が標準化されたみたいです。私の場合は Tailscale でホスト名を使っていて遭遇しました。

ちなみに http://192.168.x.x:5173 のような IP アドレス直打ちだと素通りします。詰まるのは my-desktop.local のようなホスト名でアクセスしたときだけでした。

allowedHosts を対応する

落ち着いてエラーメッセージを読むとちゃんとヒントが書かれています。

To allow this host, add "～～～～" to `server.allowedHosts` in vite.config.js.

なるほど。server.allowedHosts で通すんですね。

こちらにドキュメントがありますね。→ サーバーオプション | Vite

vite.config.ts の server セクションにホスト名を 1 行追加します。たとえば、my-desktop.local を通したいなら。

server: {
  host: '0.0.0.0',
  allowedHosts: ['my-desktop.local'],  // ← これ
}

こうやって通したホスト名を allowedHosts: ['my-desktop.local'] と指定して追加できます。

配列なので、複数のホスト名を指定できます。