Docker-Compose构建Vite React应用时请求拦截及插件报错求助

一、原生配置解决主机限制（推荐） #

不用依赖第三方插件，直接通过Vite官方配置即可解决frontend_web主机被阻止的问题：

1. 打开项目根目录的vite.config.js（或vite.config.ts）
2. 在server配置项中添加allowedHosts，将frontend_web加入允许列表，示例代码：

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

export default defineConfig({
  plugins: [react()],
  server: {
    allowedHosts: ['frontend_web', 'localhost', '127.0.0.1'] // 可按需添加其他需要允许的主机
  }
})

3. 若开发环境需要允许所有主机（生产环境不建议），可设置为allowedHosts: 'all'

二、处理vite-plugin-allowed-hosts插件报错 #

你遇到的插件解析错误，是因为包的入口配置存在问题，可尝试以下操作：

• 卸载当前插件：npm uninstall vite-plugin-allowed-hosts
• 安装最新稳定版本：npm install vite-plugin-allowed-hosts@latest --save-dev
• 若仍报错，建议放弃该插件，改用上述原生配置，官方支持的方案更稳定可靠

三、Docker-Compose额外注意点 #

• 确认Docker-Compose配置中前端服务的容器名称确实为frontend_web，若容器名不同，需同步修改allowedHosts中的对应值
• 开发环境下，Vite dev server需要允许容器内部的服务名访问，这是Docker容器间通信的必要配置

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