refactor: 前端 WebSocket 地址改为动态推导,添加 Vite 开发代理 #63

Merged
huanghaosheng merged 1 commits from fix/frontend-proxy into develop 2026-06-14 13:01:33 +08:00
3 changed files with 16 additions and 7 deletions
Showing only changes of commit d8630a8f26 - Show all commits

View File

@@ -127,7 +127,7 @@ Pipeline 实现(`internal/orchestrator/pipeline.go`)流程:
```typescript
function useVisionSession() {
const [messages, setMessages] = useState<Message[]>([]);
const wsRef = useWebSocket("ws://localhost:8080/ws");
const wsRef = useWebSocket(`${window.location.protocol === "https:" ? "wss:" : "ws:"}//${window.location.host}/ws`);
const videoRef = useRef<HTMLVideoElement>(null);
const { captureFrame } = useCamera(videoRef);
@@ -249,6 +249,6 @@ server {
### 开发环境
开发时前端Vite :5173和后端Gin :8080不同端口。当前实现中前端 WebSocket 地址硬编码为 `ws://localhost:8080/ws`,直连后端,不经过 Vite 代理
开发时前端Vite :5173和后端Gin :8080不同端口。前端 WebSocket 地址基于 `window.location.host` 动态构建,通过 Vite `server.proxy` 转发到后端,无需硬编码端口
> 如需使用 Vite 代理解决跨域,可在 `vite.config.ts` 中添加 `server.proxy` 配置,并将前端 WebSocket 地址改为相对路径。
`vite.config.ts`配置了 `/ws`WebSocket`/api`REST的代理目标为 `http://localhost:8080`

View File

@@ -1054,10 +1054,8 @@ function reconnect(attempt: number) {
**生产环境**Nginx 将 `/`(前端)、`/api/*`REST`/ws`WebSocket统一反代到同一域名详见 `02-系统架构.md` 部署架构章节。
**开发环境**:前端 WebSocket 地址硬编码为 `ws://localhost:8080/ws`,直连后端,不经过 Vite 代理。REST API 同理直连 `http://localhost:8080`
**开发环境**:前端 WebSocket 地址基于 `window.location.host` 动态构建(相对路径),通过 Vite `server.proxy` 转发到后端 `http://localhost:8080`。REST API`/api`)同理通过 Vite 代理转发
> 当前开发模式为前后端直连,未使用 Vite proxy。如需使用 Vite 代理解决跨域,需在 `vite.config.ts` 中添加 `server.proxy` 配置,并将前端 WebSocket 地址改为相对路径
**Go 后端 WebSocket CheckOrigin**:生产环境 Nginx 同源,`CheckOrigin` 可保持默认(拒绝跨域)。开发环境前端直连后端,需确保 `CheckOrigin` 允许跨域或使用 Vite proxy 转发。
**Go 后端 WebSocket CheckOrigin**:生产环境 Nginx 同源,`CheckOrigin` 可保持默认(拒绝跨域)。开发环境通过 Vite proxy 转发,前后端同源,无需额外配置 `CheckOrigin`
> 如果未来需要支持第三方客户端直连(如移动端),再按需添加 CORS 中间件和 `CheckOrigin` 白名单。

View File

@@ -15,6 +15,17 @@ const staticFiles = [
]
export default defineConfig({
server: {
proxy: {
'/ws': {
target: 'http://localhost:8080',
ws: true,
},
'/api': {
target: 'http://localhost:8080',
},
},
},
plugins: [
react(),
{