From 6749318253818f04cf9029bc8e9a26c7b116b997 Mon Sep 17 00:00:00 2001 From: John Patrick Teruel Date: Fri, 24 Apr 2026 21:06:59 +0800 Subject: [PATCH] Fix frontend API URL - use localhost instead of Docker DNS The frontend container serves static files to the browser on the host machine. When the browser makes HTTP requests from JavaScript, it runs in the host context, not the Docker container context. Therefore it needs to use localhost:8000, not api:8000 (which only works from inside Docker containers). Changed: API_BASE_URL from 'http://api:8000' to 'http://localhost:8000' This fixes the 'net::ERR_NAME_NOT_RESOLVED' error when trying to reach the API. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- docker-compose.yml | 4 ++-- frontend/src/App.tsx | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/docker-compose.yml b/docker-compose.yml index 4e9dbc7..aaa5520 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -88,10 +88,10 @@ services: retries: 5 environment: - NODE_ENV=production - - VITE_API_URL=http://api:8000 + - VITE_API_URL=http://localhost:8000 restart: unless-stopped # NOTE: All services now run in Docker on the same network - # Frontend: http://api:8000 (Docker service name resolution) + # Frontend: http://localhost:8000 (Docker service name resolution) # Consumer: Still runs on host, connects to kafka:29092 volumes: diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index e4224d6..fc2a987 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -28,8 +28,8 @@ interface Result { timestamp: string; } -// Default to Docker API service name (will be overridden by environment variable if needed) -const API_BASE_URL = 'http://api:8000'; +// Use localhost when browser accesses from host machine +const API_BASE_URL = 'http://localhost:8000'; const App: React.FC = () => { const [auth, setAuth] = useState({