vite 报错：This host is not allowed 终极解决办法

本地项目部署、测试环境域名访问项目时，很多人会遇到 Vite 经典跨主机拦截报错：

Blocked request. This host (“bioagent-test.7otech.com”) is not allowed. To allow this host, add “bioagent-test.7otech.com” to `server.allowedHosts` in vite.config.js.

本文带你彻底搞懂报错原因、两种最优解决方案、生产环境注意事项，一次性解决问题。

一、报错核心原因

Vite 5.0 及以上版本新增了主机安全校验机制：

默认只允许 localhost、127.0.0.1 本地域名访问开发服务。

当你使用 自定义域名、测试域名、外网映射域名（比如本次的 bioagent-test.7otech.com）访问项目时，不在 Vite 白名单内，会直接拦截请求，抛出该报错。

简单总结：域名未加入 Vite 允许主机白名单。

二、两种完美解决方案

打开项目根目录的 vite.config.js 或 vite.config.ts，根据场景选择对应配置，修改后必须重启项目才能生效。

方案一：指定具体域名（推荐｜生产/测试通用）

精准放行当前测试域名，安全性最高，适合长期项目使用，不会开放多余权限。

import { defineConfig } from 'vite'

export default defineConfig({
  server: {
    // 放行指定测试域名
    allowedHosts: [
      'bioagent-test.7otech.com'
    ]
  }
})

如果后续有多个测试域名，直接在数组内追加即可。

方案二：放行所有主机（仅本地调试使用）

临时开发、本地调试、频繁切换域名场景，可以直接开启全局放行，无需逐个配置域名。

import { defineConfig } from 'vite'

export default defineConfig({
  server: {
    // 允许所有主机访问
    allowedHosts: 'all'
  }
})

三、关键注意事项（避坑）

• 必须重启服务：修改 vite 配置后，热更新不生效，需要彻底关闭终端，重新启动项目
• 版本限制：该配置仅针对 Vite 5.0+ 版本，低版本无该校验规则，无需配置
• 环境区分：allowedHosts: 'all'禁止用于生产环境，会产生安全风险，仅本地调试使用
• 域名精准匹配：配置域名时不要带协议（http/https）、不要带多余空格，否则配置不生效

四、总结

1. 报错本质：Vite5+ 安全策略拦截了非本地域名的访问；

2. 正式测试/线上环境：使用指定域名白名单配置，安全稳定；

3. 本地临时调试：使用 allowedHosts: ‘all’ 快速解决问题；

4. 所有配置修改后，务必重启 Vite 服务。