web

web/ENV_CONFIG.txt

@@ -0,0 +1,164 @@
+==========================================
+    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';
+```
+
+
+==========================================
+         更多问题请查看项目文档
+==========================================