Docker环境下Vue 2 Vite无法识别子域名foo.example.st的代理问题

1. 修正API请求路径，让Vite代理生效 #

你当前的API请求使用了完整外部域名http://foo.example.st/api/auth/...，这会直接绕过Vite的代理配置，导致请求在容器内部发起时无法解析到正确的Laravel服务。

将请求改为相对路径，让请求走Vite代理：

getTenantInfo() {
    return api.get('/api/auth/...')
}

2. 调整Vite代理的Target为Docker内部服务名 #

Docker容器之间通过服务名（即docker-compose.yml中services节点下定义的名称）互相访问，而非外部域名。假设你的Laravel应用在docker-compose.yml中的服务名为laravel-api，修改vite.config.js：

server: {
    proxy: {
      '/api': {
        // 替换为Laravel服务的名称，若Laravel容器内部用了非80端口，需加上端口（比如http://laravel-api:9000）
        target: 'http://laravel-api',
        changeOrigin: true,
        // 如果Laravel的接口路径本身不带/api，取消注释下面一行；带/api则保留注释
        // rewrite: (path) => path.replace(/^\/api/, ''),
      },
    }
  },

3. 确保两个容器在同一个Docker网络 #

在docker-compose.yml中，为Vue应用和Laravel应用配置同一个自定义bridge网络，保证容器间能互相通信：

Vue应用的docker-compose.yml片段： #

services:
  front:
    # 其他镜像、端口等配置
    networks:
      - app-network

networks:
  app-network:
    external: true # 若该网络已由Laravel的docker-compose创建，添加此配置；否则移除，让系统自动创建

Laravel应用的docker-compose.yml片段： #

services:
  laravel-api:
    # 其他镜像、端口等配置
    networks:
      - app-network

networks:
  app-network:
    driver: bridge

4. 验证Laravel服务在容器内部的可访问性 #

进入Vue应用的容器，测试能否连通Laravel服务：

# 测试网络连通性
docker exec -it [vue容器名称] ping laravel-api

# 测试接口是否可用
docker exec -it [vue容器名称] curl http://laravel-api/api/auth/...

5. 额外注意：Laravel的Nginx配置（若适用） #

如果Laravel应用前端用了Nginx容器做反向代理，需确保Nginx配置允许来自Docker网络的请求，并正确处理Host头：

server {
    listen 80;
    server_name foo.example.st;
    # 允许Docker内部网段的请求
    allow 172.0.0.0/8;
    deny all;
    # 其他路由、根目录等配置
}

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