fix: use backend service name in Vite proxy target
Vite runs inside the frontend container where 'localhost' resolves to the container itself, not the backend. Change the /api proxy target from http://localhost:8000 to http://backend:8000 so the request is routed to the backend service over the compose network.
This commit is contained in:
@@ -4,7 +4,18 @@ This document breaks the entire BanGUI project into development stages, ordered
|
||||
|
||||
---
|
||||
|
||||
## ✅ DONE — Issue: Setup forward
|
||||
## ✅ DONE — Issue: Vite proxy ECONNREFUSED
|
||||
|
||||
**Problem:** The Vite dev server (running inside the frontend container) proxied
|
||||
`/api` to `http://localhost:8000`. Inside the container network `localhost`
|
||||
resolves to the container itself, not the backend service, causing
|
||||
`AggregateError [ECONNREFUSED]` for every API call.
|
||||
|
||||
**Fix:** Changed `vite.config.ts` proxy target from `http://localhost:8000` to
|
||||
`http://backend:8000` so Vite uses the Docker/Podman compose service DNS name
|
||||
to reach the backend container over the shared network.
|
||||
|
||||
---
|
||||
|
||||
**Problem:** No DB present did not forward to setup page; setup page was not redirecting to login when already done.
|
||||
|
||||
|
||||
@@ -130,10 +130,15 @@ frontend/
|
||||
├── .eslintrc.cjs
|
||||
├── .prettierrc
|
||||
├── tsconfig.json
|
||||
├── vite.config.ts
|
||||
├── vite.config.ts # Dev proxy: /api → http://backend:8000 (service DNS)
|
||||
└── package.json
|
||||
```
|
||||
|
||||
> **Dev proxy target:** `vite.config.ts` proxies all `/api` requests to
|
||||
> `http://backend:8000`. Use the compose **service name** (`backend`), not
|
||||
> `localhost` — inside the container network `localhost` resolves to the
|
||||
> frontend container itself and causes `ECONNREFUSED`.
|
||||
|
||||
### Separation of Concerns
|
||||
|
||||
- **Pages** handle routing and compose layout + components — they contain no business logic.
|
||||
|
||||
@@ -14,7 +14,10 @@ export default defineConfig({
|
||||
port: 5173,
|
||||
proxy: {
|
||||
"/api": {
|
||||
target: "http://localhost:8000",
|
||||
// In the dev compose stack the backend is reachable via its service
|
||||
// name on the shared Docker/Podman network. Using "localhost" would
|
||||
// resolve to the frontend container itself and cause ECONNREFUSED.
|
||||
target: "http://backend:8000",
|
||||
changeOrigin: true,
|
||||
},
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user