解决 Docker 中 Vite 的 Blocked request 错误

问题描述

在使用 Docker Compose 运行 Vite React 应用时，访问网站页面会出现以下错误提示：

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

该问题通常在容器化开发环境中出现，特别是当 Vite 开发服务器检测到来自未授权主机的请求时。虽然错误提示建议使用 vite-plugin-allowed-hosts 插件解决，但在安装插件时却会引发新的构建错误：

[ERROR] Failed to resolve entry for package "vite-plugin-allowed-hosts". The package may have incorrect main/module/exports specified in its package.json.

错误原因分析

导致此错误的根本原因是：

1. Vite的安全机制更新：自 Vite 6.0.11 版本起，强化了对开发服务器的安全控制
2. Docker 容器的主机名不匹配：在 Docker Compose 网络中，容器使用服务名（如 frontend_web）作为主机名
3. 默认配置限制：Vite 默认只允许 localhost 或其他明确配置的主机访问
4. 插件兼容问题：vite-plugin-allowed-hosts 插件可能存在兼容性问题，导致 Docker 构建失败

最佳解决方案

方法一：在 vite.config.js 中添加 allowedHosts 配置（推荐）

这是最直接且安全的方式，无需额外插件：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  server: {
    // 允许特定的主机名
    allowedHosts: ['frontend_web']
  }
})

方法二：临时允许所有主机（仅开发环境适用）

如果处于可信的开发环境，可以绕过主机检查：

export default defineConfig({
  server: {
    // 允许所有主机访问（慎用）
    allowedHosts: true
  }
})

安全性注意

allowedHosts: true 会禁用主机检查，可能带来安全风险，仅限在可信任的开发网络中使用

方法三：为生产预览模式配置 allowedHosts

如果问题发生在 vite preview 阶段（Vite 6.0.9+），需要单独配置预览服务器：

export default defineConfig({
  preview: {
    // 允许预览服务器访问的主机
    allowedHosts: ['your-production-domain.com', 'localhost']
  }
})

Docker 特定配置建议

在 Docker Compose 环境中，建议的完整配置方案：

// vite.config.js
export default defineConfig({
  server: {
    host: true,        // 监听所有网络接口
    port: 5173,        // 指定端口
    strictPort: true,  // 若端口被占用则报错
    allowedHosts: [
      'frontend_web',  // Docker 服务名称
      'localhost',     // 本地访问
      'your-local-ip'  // 局域网访问
    ]
  }
})

注意事项

1. 配置位置：确保配置在 server 对象而非根配置中
2. 类型安全：使用 TypeScript 时，确认 defineConfig 已正确导入
3. 容器重建：修改配置后需要重建 Docker 容器：

   docker-compose down && docker-compose up -d --build

4. 网络配置：确保 Docker Compose 网络配置正确，服务名称一致

   # docker-compose.yml 示例
   services:
     frontend_web:  # 服务名称需与 allowedHosts 配置一致
       build: .
       ports:
         - "5173:5173"

问题排查步骤

1. 确认 Vite 版本（≥6.0.11需此配置）
2. 检查 vite.config.js 路径和文件名是否正确
3. 验证 Docker 服务名称是否匹配 allowedHosts 配置
4. 重启 Docker 容器使配置生效
5. 若有网络代理，请同时配置代理设置：

server: {
  // ...其他配置
  proxy: {
    '/api': {
      target: 'http://backend_web:3000',
      changeOrigin: true
    }
  }
}

遵循以上解决方案，即可在 Docker 环境中解决 Vite 的主机拦截问题，同时保持开发环境的安全性。优先选择方法一，仅在可信环境下考虑方法二。