# 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调用