Vitepress配置中解决allowedHosts无效问题的正确方法

在使用Vitepress进行文档开发时，开发者可能会遇到一个常见问题：当通过特定域名访问本地开发服务器时，系统提示"Blocked request. This host is not allowed"错误。这种情况通常发生在通过代理或NAT环境下访问开发服务器时。

问题现象

当开发者使用命令node node_modules/vitepress/bin/vitepress.js dev docs --host 0.0.0.0启动Vitepress开发服务器，并尝试通过自定义域名（如test2.dev.cc）访问时，系统会返回错误信息，提示该主机不在允许列表中。

错误原因

这个问题的根本原因是Vitepress底层使用的Vite构建工具对主机访问有安全限制。Vite默认只允许localhost和127.0.0.1等本地地址访问开发服务器，以防止潜在的DNS重绑定攻击。

解决方案

正确的配置方法是在Vitepress配置文件中通过vite选项来设置allowedHosts。具体步骤如下：

1. 打开项目中的.vitepress/config.ts（或config.js）文件
2. 在配置对象中添加vite选项
3. 在server配置中设置allowedHosts数组

示例配置如下：

export default defineConfig({
  vite: {
    server: {
      allowedHosts: ['test2.dev.cc'] // 添加允许访问的域名
    }
  }
})

配置说明

• allowedHosts数组可以包含多个允许访问的域名
• 如果需要允许所有域名访问，可以设置为true（不推荐生产环境使用）
• 此配置与Vite原生配置完全兼容，因为Vitepress底层使用Vite构建

注意事项

1. 在开发环境中临时允许所有主机访问可以使用allowedHosts: true，但生产环境应避免这种配置
2. 如果使用Nginx等反向代理，确保代理配置正确传递主机头信息
3. 配置变更后需要重启开发服务器才能生效

通过正确理解Vitepress与Vite的配置继承关系，开发者可以灵活控制开发服务器的访问权限，既保证开发便利性又不牺牲安全性。