Vite 报错 Blocked request. This host is not allowed 怎么解决

通过隧道、自定义域名或容器打开 Vite 开发服务时，可能会看到这段报错：

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

Vite 为什么要拦截

开发服务没有登录，任何能访问它的人都能拿到源码。如果不做检查，恶意网站可以用 DNS 重绑定攻击，把自己的域名指向你的电脑，再通过你的浏览器读取这些代码。

所以 Vite 只响应它信任的域名。默认包括 localhost、.localhost 下的域名和所有 IP 地址。Host 请求头里出现其他名字，就会得到这个报错。

方法一：放行这一个域名

把域名加到 server.allowedHosts：

// vite.config.js
import { defineConfig } from "vite";

export default defineConfig({
	server: {
		allowedHosts: ["abc123.example.dev"],
	},
});

方法二：放行一个域名及其子域名

如果子域名每次都变，就在前面加一个点。.example.dev 会放行 example.dev 和它下面的所有子域名：

export default defineConfig({
	server: {
		allowedHosts: [".example.dev"],
	},
});

只添加你信任其 DNS 的域名，不要加 .com 这样的顶级域名。

也可以设置环境变量 __VITE_ADDITIONAL_SERVER_ALLOWED_HOSTS，适合不想把域名提交进配置的情况，多个域名用逗号分隔。

不建议这样做

网上常见这个写法：

server: { allowedHosts: true }

这样报错会消失，但保护也关了。Vite 文档说明，这样设置后任何网站都能向开发服务发请求，并下载你的源码。建议还是写明确的列表。

另一个办法：让 Host 保持 localhost

Vite 检查的是 Host 请求头，所以只要隧道发来的是 Host: localhost，就不会触发报错。hostc 会在请求到达你的服务之前改写 Host、Origin 和 Referer，不用改配置：

配置没改，Vite 的检查也还在。不过拿到公网地址的人都能访问你的服务，不要随便发出去。