同一Docker-Compose环境下Next.js服务端组件请求后端数据的方案

核心问题原因 #

Next.js服务端组件在client容器内部执行，而非浏览器端，因此相对路径/api/v1/会指向client容器自身（端口3000），而非Nginx的反向代理。容器间通信需要直接使用docker-compose服务名作为地址。

具体修复步骤 #

1. 修改服务端组件的API baseURL
   直接使用Django服务的内部地址（docker-compose服务名server+端口8000），结合你的API前缀：

   // 服务端组件中配置axios
   const api = axios.create({
     baseURL: 'http://server:8000/api/v1/',
     timeout: 10000,
     headers: {
       "Content-Type": "application/json",
     },
   });
   

   或者利用已有的环境变量（更灵活）：

   const apiBaseUrl = `${process.env.NEXT_PUBLIC_BACKEND_URL}/api/v1/`;
   const api = axios.create({
     baseURL: apiBaseUrl,
     timeout: 10000,
     headers: {
       "Content-Type": "application/json",
     },
   });
   

2. 验证Django URL配置
   确保Django项目的根urls.py中已正确配置API前缀：

   from django.urls import path, include
   
   urlpatterns = [
       # ... 其他路由
       path('api/v1/', include('your_app_name.urls')),
   ]
   

3. 确保容器间通信正常

   • 确认docker-compose中server服务的端口8000未被占用（内部通信不需要映射到宿主机，但你的配置已经映射了，不影响）
   • 可选：为server服务添加健康检查，确保Django完全启动后再启动client，避免启动时序问题：

     server:
       # ... 现有配置
       healthcheck:
         test: ["CMD", "curl", "-f", "http://localhost:8000/api/v1/health/"] # 替换为你的健康检查接口
         interval: 10s
         timeout: 5s
         retries: 5
       client:
         # ... 现有配置
         depends_on:
           server:
             condition: service_healthy
     

客户端组件与服务端组件的区别说明 #

• 客户端组件（浏览器执行）可以继续使用/api/v1/，因为请求会经过Nginx反向代理到server服务
• 服务端组件（容器内执行）必须直接请求server服务的内部地址，跳过Nginx

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