解决跨越问题

main
mula.liu 2025-12-02 22:54:54 +08:00
parent 3f7a983178
commit e0cfa1ef33
2 changed files with 53 additions and 4 deletions

View File

@ -28,8 +28,12 @@ REDIS_MAX_CONNECTIONS=50
CORS_ORIGINS=*
# API Base URL for frontend
# Set this to your domain or IP address
VITE_API_BASE_URL=http://your-domain.com/api
# 推荐:留空或注释掉,让前端使用相对路径 /api通过 Nginx 反向代理)
# 这样可以同时支持内网 IP 和外网域名访问
# VITE_API_BASE_URL=
# 如果前后端分离部署在不同服务器,才需要设置完整的 API 地址:
# VITE_API_BASE_URL=http://your-domain.com/api
# ======================
# Cache Configuration

View File

@ -146,8 +146,12 @@ CORS_ORIGINS=http://your-domain.com,https://your-domain.com
# 方式 4: 同时允许内网 IP 和外网域名(推荐生产环境)
CORS_ORIGINS=http://192.168.1.100,http://your-domain.com,https://your-domain.com
# 修改前端 API 地址(必须)
VITE_API_BASE_URL=http://your-domain.com/api
# 前端 API 地址配置
# 推荐:留空(默认),让前端使用相对路径 /api自动适配所有访问方式
# VITE_API_BASE_URL=
# 如果前后端分离部署在不同服务器,才需要设置完整地址:
# VITE_API_BASE_URL=http://your-domain.com/api
```
**重要说明**:
@ -155,6 +159,7 @@ VITE_API_BASE_URL=http://your-domain.com/api
- 每个来源必须包含协议http:// 或 https://
- 不要在来源末尾添加斜杠
- 使用 `*` 允许所有来源(仅用于开发环境)
- **推荐不设置 `VITE_API_BASE_URL`**,让前端使用相对路径,自动适配内网 IP 和外网域名访问
### 2. 初始化部署
@ -368,6 +373,46 @@ docker stats
## 🐛 故障排查
### 前端 API 请求配置
前端的 API 地址有三种工作模式(见 `frontend/src/utils/request.ts`
1. **生产模式(推荐)** - 使用相对路径 `/api`
- **配置**: 不设置或注释掉 `VITE_API_BASE_URL`
- **工作原理**: 请求发送到当前访问地址的 `/api` 路径,由 Nginx 反向代理到后端
- **优点**: 自动适配所有访问方式(内网 IP、外网域名
- **示例**:
- 访问 `http://192.168.1.100` → API 请求到 `http://192.168.1.100/api`
- 访问 `http://domain.com` → API 请求到 `http://domain.com/api`
2. **指定完整 API 地址** - 跨域或前后端分离部署
- **配置**: `VITE_API_BASE_URL=http://your-server.com/api`
- **工作原理**: 所有 API 请求都发送到指定的完整地址
- **缺点**: 只能指定一个地址,无法同时支持多种访问方式
3. **开发模式** - 自动检测
- **配置**: 不设置 `VITE_API_BASE_URL` + `npm run dev`
- **工作原理**: 自动使用 `http://当前主机名:8000/api`
**常见问题**:
**问题**: 内网 IP 访问时API 请求跳到外网域名
```bash
# 原因:设置了完整的 API 地址
VITE_API_BASE_URL=http://your-domain.com/api
```
**解决**: 注释掉或删除 `VITE_API_BASE_URL`,让前端使用相对路径
**问题**: API 请求 404 Not Found
```bash
# 检查 Nginx 是否正常运行
docker-compose ps frontend
docker-compose logs frontend
# 检查 Nginx 配置是否正确
docker-compose exec frontend nginx -t
```
### CORS 配置错误
**错误信息**: