如何在Vite中配置支持子域名通配符匹配的允许主机？

Vite原生的server.host/preview.host配置仅支持指定具体主机或0.0.0.0（监听所有接口），没有直接对应WebpackallowedHosts的子域名通配符功能。可以通过自定义中间件实现相同效果，具体步骤如下：

实现思路 #

通过Vite的server.middlewares（开发环境）和preview.middlewares（预览环境）添加自定义校验逻辑，拦截请求并检查Host头是否符合允许的规则，不符合则返回403禁止访问。

完整配置示例 #

在vite.config.js中添加以下代码：

import { defineConfig } from 'vite'

// 定义允许的主机规则，和Webpack格式一致
const allowedHosts = [
  '.host.com',
  'host2.com'
]

// 校验Host是否符合规则的工具函数
function isAllowedHost(host) {
  // 剥离Host中的端口号（如存在）
  const hostWithoutPort = host.split(':')[0]
  return allowedHosts.some(allowed => {
    if (allowed.startsWith('.')) {
      // 处理子域名通配符：匹配该域名的所有子域名，包括自身
      return hostWithoutPort.endsWith(allowed) || hostWithoutPort === allowed.slice(1)
    } else {
      // 处理精确匹配的主机
      return hostWithoutPort === allowed
    }
  })
}

export default defineConfig({
  server: {
    middlewares: {
      use: (app) => {
        app.use((req, res, next) => {
          const host = req.headers.host
          if (host && !isAllowedHost(host)) {
            res.statusCode = 403
            res.end('Forbidden: Host not allowed')
            return
          }
          next()
        })
      }
    }
  },
  preview: {
    // 预览环境同样配置校验逻辑
    middlewares: {
      use: (app) => {
        app.use((req, res, next) => {
          const host = req.headers.host
          if (host && !isAllowedHost(host)) {
            res.statusCode = 403
            res.end('Forbidden: Host not allowed')
            return
          }
          next()
        })
      }
    }
  }
})

说明 #

• 该配置会允许访问：host2.com、host.com及其所有子域名（如a.host.com、b.host.com等）
• 开发环境和预览环境需要分别配置中间件，因为Vite的开发服务器和预览服务器是独立运行的
• 若请求的Host不在允许列表内，会返回403状态码，与Webpack的拦截行为一致

内容的提问来源于stack exchange，提问作者mito