194 lines
5.3 KiB
Markdown
194 lines
5.3 KiB
Markdown
# API 域名映射配置说明
|
|
|
|
## 功能概述
|
|
|
|
前端应用现在支持根据不同的访问域名自动切换到对应的后端API地址,无需手动配置。
|
|
|
|
## 域名映射规则
|
|
|
|
| 前端访问域名 | 后端API地址 | 说明 |
|
|
|------------|------------|------|
|
|
| `*.vizee.cn` | `https://tral.cc/api/v1` | vizee.cn 域名下的所有子域名 |
|
|
| `*.gvizee.com` | `https://104.244.91.212:8060/api/v1` | gvizee.com 域名下的所有子域名 |
|
|
| `localhost` 或 `127.0.0.1` | `http://localhost:8081/api/v1` | 本地开发环境 |
|
|
| 其他域名 | `https://tral.cc/api/v1` | 默认使用 tral.cc API |
|
|
|
|
## 实现原理
|
|
|
|
在 `web/assets/js/api.js` 中的 `getAPIBaseURL()` 函数会自动检测当前访问的域名,并返回对应的API地址:
|
|
|
|
```javascript
|
|
function getAPIBaseURL() {
|
|
// 优先使用 localStorage 中的手动配置（用于调试）
|
|
const manualBaseURL = localStorage.getItem('API_BASE_URL');
|
|
if (manualBaseURL) {
|
|
return manualBaseURL;
|
|
}
|
|
|
|
const hostname = window.location.hostname;
|
|
|
|
// 开发环境
|
|
if (hostname === 'localhost' || hostname === '127.0.0.1') {
|
|
return 'http://localhost:8081/api/v1';
|
|
}
|
|
|
|
// vizee.cn 域名
|
|
if (hostname.includes('vizee.cn')) {
|
|
return 'https://tral.cc/api/v1';
|
|
}
|
|
|
|
// gvizee.com 域名
|
|
if (hostname.includes('gvizee.com')) {
|
|
return 'https://104.244.91.212:8060/api/v1';
|
|
}
|
|
|
|
// 默认
|
|
return 'https://tral.cc/api/v1';
|
|
}
|
|
```
|
|
|
|
## 使用场景
|
|
|
|
### 1. 正常访问
|
|
用户通过以下任一域名访问网站时,会自动连接到对应的后端API:
|
|
|
|
- 访问 `https://www.vizee.cn` → 自动使用 `https://tral.cc/api/v1`
|
|
- 访问 `https://shop.gvizee.com` → 自动使用 `https://104.244.91.212:8060/api/v1`
|
|
- 访问 `http://localhost:3000` → 自动使用 `http://localhost:8081/api/v1`
|
|
|
|
### 2. 调试模式
|
|
开发者可以通过浏览器控制台手动设置API地址,用于测试和调试:
|
|
|
|
```javascript
|
|
// 查看当前配置
|
|
API_DEBUG.getConfig()
|
|
|
|
// 手动设置API地址(优先级最高)
|
|
API_DEBUG.setBaseURL('https://test-api.example.com/api/v1')
|
|
|
|
// 重置为自动检测
|
|
API_DEBUG.resetBaseURL()
|
|
|
|
// 测试API连接
|
|
API_DEBUG.testConnection()
|
|
|
|
// 查看帮助
|
|
API_DEBUG.help()
|
|
```
|
|
|
|
## 控制台日志
|
|
|
|
应用启动时会在控制台输出当前的API配置信息:
|
|
|
|
```
|
|
[API] 检测到 vizee.cn 域名，使用 tral.cc API
|
|
[API] 当前环境: 生产环境
|
|
[API] 后端地址: https://tral.cc/api/v1
|
|
```
|
|
|
|
或
|
|
|
|
```
|
|
[API] 检测到 gvizee.com 域名，使用 104.244.91.212 API
|
|
[API] 当前环境: 生产环境
|
|
[API] 后端地址: https://104.244.91.212:8060/api/v1
|
|
```
|
|
|
|
## 优先级说明
|
|
|
|
API地址的选择优先级(从高到低):
|
|
|
|
1. **手动配置** (`localStorage.API_BASE_URL`) - 调试用途
|
|
2. **localhost/127.0.0.1** - 本地开发环境
|
|
3. **vizee.cn** - 生产环境1
|
|
4. **gvizee.com** - 生产环境2
|
|
5. **默认** - tral.cc API
|
|
|
|
## 修改的文件
|
|
|
|
- `web/assets/js/api.js`
|
|
- 修改 `getAPIBaseURL()` 函数,添加域名判断逻辑
|
|
- 更新 `API_DEBUG.help()` 帮助信息
|
|
|
|
## 注意事项
|
|
|
|
1. **域名匹配使用包含判断**: 使用 `hostname.includes()`,因此子域名也会匹配
|
|
- `www.vizee.cn` ✅ 匹配
|
|
- `shop.vizee.cn` ✅ 匹配
|
|
- `admin.gvizee.com` ✅ 匹配
|
|
|
|
2. **HTTPS支持**:
|
|
- vizee.cn → tral.cc 使用 HTTPS
|
|
- gvizee.com → 104.244.91.212:8060 使用 HTTPS
|
|
|
|
3. **跨域配置**: 确保后端API服务器已正确配置CORS,允许对应的前端域名访问
|
|
|
|
4. **缓存清除**: 如果修改了配置但未生效,尝试:
|
|
- 清除浏览器缓存
|
|
- 执行 `API_DEBUG.resetBaseURL()` 清除手动配置
|
|
- 刷新页面
|
|
|
|
## 测试建议
|
|
|
|
### 本地测试
|
|
1. 访问 `http://localhost:3000`
|
|
2. 打开控制台,执行 `API_DEBUG.getConfig()`
|
|
3. 确认 `baseURL` 为 `http://localhost:8081/api/v1`
|
|
|
|
### vizee.cn 测试
|
|
1. 访问 `https://www.vizee.cn`
|
|
2. 打开控制台,执行 `API_DEBUG.getConfig()`
|
|
3. 确认 `baseURL` 为 `https://tral.cc/api/v1`
|
|
4. 测试登录、购物车等功能是否正常
|
|
|
|
### gvizee.com 测试
|
|
1. 访问 `https://shop.gvizee.com`
|
|
2. 打开控制台,执行 `API_DEBUG.getConfig()`
|
|
3. 确认 `baseURL` 为 `https://104.244.91.212:8060/api/v1`
|
|
4. 测试登录、购物车等功能是否正常
|
|
|
|
### 手动切换测试
|
|
```javascript
|
|
// 临时切换到测试环境
|
|
API_DEBUG.setBaseURL('https://test-api.example.com/api/v1')
|
|
// 刷新页面后生效
|
|
|
|
// 恢复自动检测
|
|
API_DEBUG.resetBaseURL()
|
|
// 刷新页面后恢复
|
|
```
|
|
|
|
## 故障排除
|
|
|
|
### 问题1: API请求失败
|
|
- 检查控制台的API地址配置是否正确
|
|
- 确认后端服务是否正常运行
|
|
- 检查网络连接和防火墙设置
|
|
|
|
### 问题2: 切换域名后API地址未改变
|
|
- 清除浏览器缓存
|
|
- 检查是否设置了手动配置: `localStorage.getItem('API_BASE_URL')`
|
|
- 如有手动配置,执行 `API_DEBUG.resetBaseURL()` 清除
|
|
|
|
### 问题3: CORS错误
|
|
- 确认后端API服务器的CORS配置包含当前访问的域名
|
|
- 检查后端服务器的 `Access-Control-Allow-Origin` 响应头
|
|
|
|
## 扩展配置
|
|
|
|
如需添加新的域名映射,在 `getAPIBaseURL()` 函数中添加判断逻辑:
|
|
|
|
```javascript
|
|
// 新增域名映射
|
|
if (hostname.includes('newdomain.com')) {
|
|
console.log('[API] 检测到 newdomain.com 域名，使用自定义 API');
|
|
return 'https://api.newdomain.com/api/v1';
|
|
}
|
|
```
|
|
|
|
## 版本信息
|
|
|
|
- 修改日期: 2024-11-26
|
|
- 修改文件: `web/assets/js/api.js`
|
|
- 影响范围: 所有前端页面的API调用
|