# HTTPS 跨域问题解决方案 ## 问题说明 你的 Web 前端部署在 `https://gvizee.com/`(HTTPS),而后端 API 在 `http://104.244.91.212:8060`(HTTP)。 这会导致两个问题: 1. **混合内容错误**:HTTPS 页面无法访问 HTTP 接口(浏览器安全策略) 2. **CORS 跨域**:需要正确配置 Origin ## ✅ 推荐解决方案:使用 Nginx HTTPS 反向代理 ### 步骤 1:在服务器上生成 SSL 证书 ```bash # SSH 连接到你的服务器 104.244.91.212 ssh user@104.244.91.212 # 创建证书目录 sudo mkdir -p /etc/nginx/ssl # 生成自签名证书(有效期 365 天) sudo openssl req -x509 -nodes -days 365 -newkey rsa:2048 \ -keyout /etc/nginx/ssl/server.key \ -out /etc/nginx/ssl/server.crt \ -subj "/C=US/ST=State/L=City/O=Organization/CN=104.244.91.212" ``` ### 步骤 2:配置 Nginx ```bash # 将项目根目录的 nginx-https-proxy.conf 上传到服务器 # 然后执行: # 复制配置文件 sudo cp nginx-https-proxy.conf /etc/nginx/sites-available/api-https # 创建软链接 sudo ln -s /etc/nginx/sites-available/api-https /etc/nginx/sites-enabled/ # 测试配置 sudo nginx -t # 如果测试通过,重启 Nginx sudo systemctl restart nginx ``` ### 步骤 3:配置防火墙 ```bash # 允许 HTTPS 端口 sudo ufw allow 443/tcp # 检查防火墙状态 sudo ufw status ``` ### 步骤 4:验证 HTTPS 访问 ```bash # 测试 HTTPS 健康检查 curl -k https://104.244.91.212:8060/health # 测试 API curl -k https://104.244.91.212:8060/api/v1/banners ``` ### 步骤 5:前端配置已更新 前端代码已经更新,`gvizee.com` 域名会自动使用 HTTPS: ```javascript // web/assets/js/api.js 已更新为: if (hostname.includes('gvizee.com')) { return 'https://104.244.91.212:8060/api/v1'; } ``` 后端 CORS 也已添加 HTTPS 支持。 --- ## 🔧 方案二:临时使用 HTTP(仅测试) 如果暂时无法配置 HTTPS,可以: ### 选项 1:使用 HTTP 访问前端 访问 `http://gvizee.com/`(HTTP)而不是 `https://gvizee.com/`(HTTPS) ### 选项 2:临时修改前端配置 在浏览器控制台执行: ```javascript // 临时使用 HTTP API_DEBUG.setBaseURL('http://104.244.91.212:8060/api/v1') location.reload() ``` **注意**:这只是临时方案,刷新页面后会失效。 --- ## 📋 生产环境推荐:使用 Let's Encrypt 免费证书 对于生产环境,建议使用 Let's Encrypt 的免费 SSL 证书: ```bash # 安装 Certbot sudo apt update sudo apt install certbot python3-certbot-nginx # 自动配置 HTTPS(需要域名) sudo certbot --nginx -d gvizee.com -d www.gvizee.com # 证书会自动续期 sudo certbot renew --dry-run ``` --- ## 🔍 常见问题 ### Q1: 浏览器显示"不安全"警告? **A**: 这是因为使用了自签名证书。在浏览器中点击"高级" → "继续访问"即可。生产环境请使用 Let's Encrypt 证书。 ### Q2: CORS 错误还是存在? **A**: 1. 确认后端服务已重启 2. 检查 Nginx 日志:`sudo tail -f /var/log/nginx/api_error.log` 3. 在浏览器开发者工具中检查请求头的 Origin ### Q3: 端口 8060 还需要监听吗? **A**: 是的。架构是: - 浏览器 → Nginx (443端口,HTTPS) → 后端服务 (8060端口,HTTP) - Nginx 作为反向代理处理 HTTPS,后端继续使用 HTTP --- ## 📊 架构示意图 ``` 浏览器 (https://gvizee.com) ↓ HTTPS Nginx (443 端口) ↓ HTTP (内网) Go 后端服务 (8060 端口) ``` --- ## ✅ 检查清单 完成配置后,请检查: - [ ] SSL 证书已生成 - [ ] Nginx 配置已更新并重启 - [ ] 防火墙 443 端口已开放 - [ ] 后端服务运行在 8060 端口 - [ ] 后端 CORS 配置包含 `https://gvizee.com` - [ ] 前端代码已更新使用 HTTPS - [ ] 浏览器能访问 `https://104.244.91.212:8060/health` --- 需要帮助?检查以下日志: - Nginx 错误日志:`/var/log/nginx/api_error.log` - Nginx 访问日志:`/var/log/nginx/api_access.log` - 后端日志:查看 Go 服务的控制台输出