You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
3.8 KiB
3.8 KiB
局域网访问配置指南
问题描述
局域网内其他设备无法登录,但本机可以正常登录。
根本原因
- CORS 跨域限制:后端 CORS 配置中缺少局域网 IP 地址
- 前端 API 地址:前端需要使用局域网 IP 访问后端
解决方案
1. 获取本机局域网 IP
# macOS
ipconfig getifaddr en0
# Linux
hostname -I | awk '{print $1}'
# Windows
ipconfig | findstr IPv4
假设获取到的 IP 为:192.168.31.178
2. 修改后端 CORS 配置
编辑 server/.env:
# CORS 配置 - 添加局域网 IP
CORS_ORIGINS=["http://localhost:6160","http://192.168.31.178:6160"]
3. 修改前端配置
编辑 client/.env.development.local:
# 局域网访问配置
VITE_API_BASE_URL=http://192.168.31.178:6170/api/v1
4. 修改前端 Vite 配置
编辑 client/vite.config.ts:
server: {
port: 6160,
host: '0.0.0.0', // 允许局域网访问
open: true,
}
5. 重启服务
# 重启后端(重要:需要重新加载 .env)
cd server
docker-compose restart app
# 重启前端
cd client
npm run dev
验证步骤
在其他设备上测试
- 访问前端:
http://192.168.31.178:6160 - 测试登录:
- 手机号:
13800138000 - 验证码:
6666
- 手机号:
- 检查浏览器控制台:
- 查看是否有 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
解决:
- 检查防火墙是否允许端口 6170
- 确认后端服务正在运行:
docker-compose ps - 测试后端连接:
curl http://192.168.31.178:6170/health
Token 存储问题
前端使用 localStorage 存储 token,这在跨设备访问时是正常的。每个设备需要独立登录。
生产环境建议
使用通配符(仅开发环境)
# 开发环境可以使用通配符(不推荐生产环境)
CORS_ORIGINS=["http://localhost:6160","http://*:6160"]
使用域名(生产环境)
# 生产环境使用域名
CORS_ORIGINS=["https://app.jointo.ai","https://admin.jointo.ai"]
使用 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,无需指定端口。
安全注意事项
- 开发环境专用:局域网访问配置仅用于开发测试
- 生产环境:必须使用 HTTPS + 域名
- 防火墙:确保只在可信网络中开放端口
- 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
- 两台设备在同一局域网内
- 使用浏览器隐私模式测试(排除缓存问题)