169 lines
4.0 KiB
Markdown
169 lines
4.0 KiB
Markdown
|
|
# 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 服务的控制台输出
|