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.
|
**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
|
├── .eslintrc.cjs
|
||||||
├── .prettierrc
|
├── .prettierrc
|
||||||
├── tsconfig.json
|
├── tsconfig.json
|
||||||
├── vite.config.ts
|
├── vite.config.ts # Dev proxy: /api → http://backend:8000 (service DNS)
|
||||||
└── package.json
|
└── 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
|
### Separation of Concerns
|
||||||
|
|
||||||
- **Pages** handle routing and compose layout + components — they contain no business logic.
|
- **Pages** handle routing and compose layout + components — they contain no business logic.
|
||||||
|
|||||||
@@ -14,7 +14,10 @@ export default defineConfig({
|
|||||||
port: 5173,
|
port: 5173,
|
||||||
proxy: {
|
proxy: {
|
||||||
"/api": {
|
"/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,
|
changeOrigin: true,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|||||||
Reference in New Issue
Block a user