yunqueai/ai_dianshang

Fork 0

Files

sjk 5683f35942 web

2025-11-28 15:18:10 +08:00

5.3 KiB

Raw Permalink Blame History

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地址:

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地址,用于测试和调试:

// 查看当前配置
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地址的选择优先级(从高到低):

手动配置 (localStorage.API_BASE_URL) - 调试用途
localhost/127.0.0.1 - 本地开发环境
vizee.cn - 生产环境1
gvizee.com - 生产环境2
默认 - tral.cc API

修改的文件

web/assets/js/api.js
- 修改 getAPIBaseURL() 函数,添加域名判断逻辑
- 更新 API_DEBUG.help() 帮助信息

注意事项

域名匹配使用包含判断: 使用 hostname.includes(),因此子域名也会匹配
- www.vizee.cn ✅ 匹配
- shop.vizee.cn ✅ 匹配
- admin.gvizee.com ✅ 匹配
HTTPS支持:
- vizee.cn → tral.cc 使用 HTTPS
- gvizee.com → 104.244.91.212:8060 使用 HTTPS
跨域配置: 确保后端API服务器已正确配置CORS,允许对应的前端域名访问
缓存清除: 如果修改了配置但未生效,尝试:
- 清除浏览器缓存
- 执行 API_DEBUG.resetBaseURL() 清除手动配置
- 刷新页面

测试建议

本地测试

访问 http://localhost:3000
打开控制台,执行 API_DEBUG.getConfig()
确认 baseURL 为 http://localhost:8081/api/v1

vizee.cn 测试

访问 https://www.vizee.cn
打开控制台,执行 API_DEBUG.getConfig()
确认 baseURL 为 https://tral.cc/api/v1
测试登录、购物车等功能是否正常

gvizee.com 测试

访问 https://shop.gvizee.com
打开控制台,执行 API_DEBUG.getConfig()
确认 baseURL 为 https://104.244.91.212:8060/api/v1
测试登录、购物车等功能是否正常

手动切换测试

// 临时切换到测试环境
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() 函数中添加判断逻辑:

// 新增域名映射
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调用

5.3 KiB Raw Permalink Blame History