# 局域网访问配置指南

## 问题描述

局域网内其他设备无法登录，但本机可以正常登录。

## 根本原因

1. **CORS 跨域限制**：后端 CORS 配置中缺少局域网 IP 地址
2. **前端 API 地址**：前端需要使用局域网 IP 访问后端

## 解决方案

### 1. 获取本机局域网 IP

```bash
# macOS
ipconfig getifaddr en0

# Linux
hostname -I | awk '{print $1}'

# Windows
ipconfig | findstr IPv4
```

假设获取到的 IP 为：`192.168.31.178`

### 2. 修改后端 CORS 配置

编辑 `server/.env`：

```env
# CORS 配置 - 添加局域网 IP
CORS_ORIGINS=["http://localhost:6160","http://192.168.31.178:6160"]
```

### 3. 修改前端配置

编辑 `client/.env.development.local`：

```env
# 局域网访问配置
VITE_API_BASE_URL=http://192.168.31.178:6170/api/v1
```

### 4. 修改前端 Vite 配置

编辑 `client/vite.config.ts`：

```typescript
server: {
  port: 6160,
  host: '0.0.0.0', // 允许局域网访问
  open: true,
}
```

### 5. 重启服务

```bash
# 重启后端（重要：需要重新加载 .env）
cd server
docker-compose restart app

# 重启前端
cd client
npm run dev
```

## 验证步骤

### 在其他设备上测试

1. **访问前端**：`http://192.168.31.178:6160`
2. **测试登录**：
   - 手机号：`13800138000`
   - 验证码：`6666`
3. **检查浏览器控制台**：
   - 查看是否有 CORS 错误
   - 查看 Network 面板中的 API 请求

### 常见错误排查

#### CORS 错误
```
Access to XMLHttpRequest at 'http://192.168.31.178:6170/api/v1/auth/login/phone' 
from origin 'http://192.168.31.178:6160' has been blocked by CORS policy
```

**解决**：确保后端 `.env` 中的 `CORS_ORIGINS` 包含前端的完整地址。

#### 连接超时
```
Network Error: timeout of 30000ms exceeded
```

**解决**：
1. 检查防火墙是否允许端口 6170
2. 确认后端服务正在运行：`docker-compose ps`
3. 测试后端连接：`curl http://192.168.31.178:6170/health`

#### Token 存储问题

前端使用 `localStorage` 存储 token，这在跨设备访问时是正常的。每个设备需要独立登录。

## 生产环境建议

### 使用通配符（仅开发环境）

```env
# 开发环境可以使用通配符（不推荐生产环境）
CORS_ORIGINS=["http://localhost:6160","http://*:6160"]
```

### 使用域名（生产环境）

```env
# 生产环境使用域名
CORS_ORIGINS=["https://app.jointo.ai","https://admin.jointo.ai"]
```

### 使用 Nginx 反向代理

```nginx
server {
    listen 80;
    server_name 192.168.31.178;

    # 前端
    location / {
        proxy_pass http://localhost:6160;
    }

    # 后端 API
    location /api {
        proxy_pass http://localhost:6170;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}
```

这样只需要访问 `http://192.168.31.178`，无需指定端口。

## 安全注意事项

1. **开发环境专用**：局域网访问配置仅用于开发测试
2. **生产环境**：必须使用 HTTPS + 域名
3. **防火墙**：确保只在可信网络中开放端口
4. **Token 安全**：使用 HttpOnly Cookie（生产环境推荐）

## 故障排查清单

- [ ] 后端 `.env` 中 `CORS_ORIGINS` 包含局域网 IP
- [ ] 前端 `.env.development.local` 中 API 地址使用局域网 IP
- [ ] 前端 `vite.config.ts` 中 `host: '0.0.0.0'`
- [ ] 后端服务已重启（`docker-compose restart app`）
- [ ] 前端服务已重启（`npm run dev`）
- [ ] 防火墙允许端口 6160 和 6170
- [ ] 两台设备在同一局域网内
- [ ] 使用浏览器隐私模式测试（排除缓存问题）

## 参考资料

- [FastAPI CORS 文档](https://fastapi.tiangolo.com/tutorial/cors/)
- [Vite 服务器配置](https://vitejs.dev/config/server-options.html)
- [MDN CORS 指南](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CORS)