==========================================
    API环境自动检测配置说明
==========================================

## 1. 自动环境检测规则

系统会根据当前访问的URL自动判断调用哪个后端：

### 开发环境（自动检测）
- 访问地址：localhost 或 127.0.0.1
- 后端地址：http://localhost:8080/api/v1
- 示例：http://localhost:8080/login.html

### 生产环境（自动检测）
- 访问地址：除 localhost/127.0.0.1 以外的域名
- 后端地址：自动使用当前域名 + /api/v1
- 示例：https://www.example.com → https://www.example.com/api/v1


## 2. 手动配置（用于特殊调试场景）

### 方法一：浏览器控制台
打开浏览器控制台（F12），输入以下命令：

# 查看当前配置
API_DEBUG.getConfig()

# 设置自定义后端地址
API_DEBUG.setBaseURL('http://192.168.1.100:8080/api/v1')

# 重置为自动检测
API_DEBUG.resetBaseURL()

# 测试后端连接
API_DEBUG.testConnection()

# 查看帮助
API_DEBUG.help()


### 方法二：测试页面
访问：http://localhost:8080/api-test.html
在页面中可以可视化地配置和测试


## 3. 常见使用场景

### 场景1：本地开发
- 前端：http://localhost:8080
- 后端：http://localhost:8080（Go后端）
- 配置：无需配置，自动检测

### 场景2：本地开发，但后端在其他机器
- 前端：http://localhost:8080
- 后端：http://192.168.1.100:8080
- 配置：API_DEBUG.setBaseURL('http://192.168.1.100:8080/api/v1')

### 场景3：生产环境
- 前端：https://www.yoursite.com
- 后端：https://www.yoursite.com
- 配置：无需配置，自动检测


## 4. 启动步骤

### 开发环境启动
1. 启动后端：
   cd d:\project\Work\dianshang\server
   go run cmd/main.go

2. 启动前端（任选一种）：
   cd d:\project\Work\dianshang\web
   
   # Python
   python -m http.server 8080
   
   # Node.js
   npx http-server -p 8080

3. 访问：http://localhost:8080/login.html


## 5. 调试技巧

1. 查看环境信息
   打开浏览器控制台，会自动显示：
   [API] 当前环境: 开发环境
   [API] 后端地址: http://localhost:8080/api/v1

2. 测试API连接
   API_DEBUG.testConnection()

3. 查看网络请求
   浏览器F12 → Network标签 → 查看API请求


## 6. 注意事项

⚠️ 手动配置会保存在 localStorage 中
   - 如果遇到问题，可以使用 API_DEBUG.resetBaseURL() 重置
   - 清除浏览器缓存也会清除手动配置

⚠️ 跨域问题
   - 开发环境：后端已配置CORS，支持 localhost 访问
   - 生产环境：需要在后端CORS配置中添加生产域名

⚠️ HTTPS 和 HTTP 混合
   - 如果前端使用 HTTPS，后端也必须使用 HTTPS
   - 浏览器会阻止 HTTPS 页面访问 HTTP 接口


## 7. 故障排查

问题1：API调用失败，提示CORS错误
解决：检查后端CORS配置，确保允许当前域名

问题2：本地开发时无法访问后端
解决：
1. 确认后端服务已启动（go run cmd/main.go）
2. 访问 http://localhost:8080/health 检查后端是否运行
3. 检查端口是否被占用

问题3：生产环境API路径不正确
解决：
1. 检查Nginx配置，确保正确代理 /api/v1
2. 或使用 API_DEBUG.setBaseURL() 手动设置完整后端地址


## 8. 生产环境部署建议

### 方案1：前后端同域名（推荐）
```nginx
server {
    listen 80;
    server_name www.example.com;
    
    # 前端静态文件
    location / {
        root /var/www/web;
        try_files $uri $uri/ /index.html;
    }
    
    # 后端API代理
    location /api/v1 {
        proxy_pass http://localhost:8080/api/v1;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}
```
此时前端会自动检测并使用：https://www.example.com/api/v1

### 方案2：前后端分离部署
如果后端独立部署（如 api.example.com），需要修改 api.js：
在生产环境判断中，返回固定的后端地址：
```javascript
// 生产环境
return 'https://api.example.com/api/v1';
```


==========================================
         更多问题请查看项目文档
==========================================