📱 移动端访问配置指南

✅ 证书已更新

新证书支持的IP地址：

✓ 127.0.0.1 (localhost)
✓ 10.241.40.29 (你的IP1)
✓ 192.168.2.105 (你的IP2)

🚀 快速启动

1. 重启服务（重要！）

后端（如果正在运行，Ctrl+C停止）：

cd /Users/wuzilong/work/00code/Tolan/backend
python main.py

前端（Ctrl+C完全停止，然后）：

cd /Users/wuzilong/work/00code/Tolan/frontend
npm run dev

应该看到：

➜  Local:   https://localhost:5173/
➜  Network: https://192.168.2.105:5173/

2. 电脑浏览器测试

访问：https://192.168.2.105:5173

接受证书警告：

Chrome: 点击"高级" → "继续前往..."
Safari: 点击"显示详细信息" → "访问此网站"

验证WebSocket连接（F12控制台）：

✅ 连接WebSocket: wss://192.168.2.105:8000/ws/realtime
✅ WebSocket连接成功

📱 iPhone/iPad Safari 配置

方法1：通过Safari信任证书（推荐）

步骤1：先访问后端API文档

在iPhone Safari访问：

https://192.168.2.105:8000/docs

步骤2：信任证书

会看到"无法验证服务器身份"
点击"显示详细信息"
点击"访问此网站"
再次点击"访问此网站"（确认）

如果页面成功加载，说明证书已被临时信任。

步骤3：访问前端

现在访问：

https://192.168.2.105:5173

应该可以正常使用了！

方法2：通过描述文件安装证书（更可靠）

步骤1：导出证书为描述文件

在电脑上运行：

cd /Users/wuzilong/work/00code/Tolan/ssl

# 转换证书为iOS可用的格式
openssl x509 -outform der -in cert.pem -out cert.crt

# 启动简单HTTP服务器
python3 -m http.server 8888

步骤2：iPhone下载证书

iPhone Safari访问：

http://192.168.2.105:8888/cert.crt

点击"允许"下载描述文件

步骤3：安装描述文件

打开"设置" → "通用"
往下滚动，找到"VPN与设备管理"
点击"已下载的描述文件"
点击"Tolan Voice Assistant"
点击右上角"安装"
输入密码
点击"安装"（确认）

步骤4：信任证书

打开"设置" → "通用"
点击"关于本机"
往下滚动，点击"证书信任设置"
找到"Tolan Voice Assistant"
打开开关（绿色）
点击"继续"

步骤5：测试访问

现在访问：

https://192.168.2.105:5173

应该不会再有证书警告！

方法3：临时使用HTTP（最简单，但不安全）

如果只是开发测试，可以临时禁用HTTPS：

删除证书：

cd /Users/wuzilong/work/00code/Tolan
rm ssl/key.pem ssl/cert.pem

修改前端配置：

cat > frontend/.env << 'ENVEOF'
# 使用HTTP（无证书）
VITE_WS_URL=ws://192.168.2.105:8000/ws/realtime
ENVEOF

重启服务：

后端会自动切换为HTTP
前端会自动切换为HTTP

访问：

http://192.168.2.105:5173  （注意是http）

⚠️ 缺点：某些浏览器可能限制HTTP下的麦克风权限

🔍 验证配置

正确的日志

前端控制台：

✅ 连接WebSocket: wss://192.168.2.105:8000/ws/realtime
✅ WebSocket连接成功
✅ 会话已建立

后端日志：

✅ 使用SSL证书启动
INFO:     Uvicorn running on https://0.0.0.0:8000
DEBUG:    = connection is CONNECTING
...
INFO:     connection open

错误的情况

如果看到：

❌ WebSocket connection to 'wss://...' failed: 此服务器的证书无效

说明：证书未被信任，请使用上述方法1或方法2信任证书。

📊 配置对比

方案	优点	缺点	推荐度
方法1：临时信任	快速简单	每次重新打开Safari可能需要重新信任	⭐⭐⭐
方法2：安装描述文件	永久信任，体验最好	步骤较多	⭐⭐⭐⭐⭐
方法3：使用HTTP	最简单	不安全，某些功能可能受限	⭐⭐

🎯 推荐操作步骤

对于开发测试，推荐方法1（最快）：

重启前端服务：
```
cd frontend
npm run dev
```
1. iPhone访问后端API： ```

https://192.168.2.105:8000/docs

   点击"访问此网站"（2次）

3. **iPhone访问前端**：

https://192.168.2.105:5173 ```

开始使用！

对于长期使用，推荐方法2（安装证书）

现在请：

完全停止并重启前端（Ctrl+C，然后 npm run dev）
iPhone Safari访问：https://192.168.2.105:8000/docs
点击"访问此网站"（2次）
然后访问：https://192.168.2.105:5173

试试看！🚀

MOBILE_SETUP.md 4.7 KB История Исходник