This commit is contained in:
2025-11-05 13:27:52 +08:00
parent 2fab612906
commit 855d22f448
8 changed files with 275 additions and 21 deletions

89
配置说明.md Normal file
View File

@@ -0,0 +1,89 @@
# 解决HTTPS访问后端接口问题
## 问题现象
访问 `https://jarvis.van333.cn` 时,前端请求仍然是 `http://134.175.126.60:30313/captchaImage`,导致混合内容错误。
## 原因分析
1. **缺少环境变量配置文件**`.env.production` 文件不存在,打包时使用了默认值
2. **打包后的代码包含硬编码IP**如果之前打包时使用了IP地址需要重新打包
## 解决步骤
### 1. 创建环境变量文件
请在项目根目录手动创建以下两个文件:
#### `.env.development`(开发环境)
```
# 开发环境配置
# 开发环境使用代理路径通过vue.config.js的devServer代理到后端
VUE_APP_BASE_API=/dev-api
```
#### `.env.production`(生产环境)
```
# 生产环境配置
# 生产环境使用相对路径通过nginx代理到后端
VUE_APP_BASE_API=/dev-api
```
**或者运行批处理文件:**
```
双击运行:创建环境变量文件.bat
```
### 2. 重新打包项目
```bash
npm run build:prod
```
### 3. 部署到服务器
`dist` 目录中的文件部署到 `/www/sites/jarvis.van333.cn/index/`
### 4. 配置Nginx
确保使用 `nginx-https.conf` 中的配置,关键部分:
```nginx
location /dev-api/ {
proxy_pass http://127.0.0.1:30313/;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
```
### 5. 重启Nginx
```bash
sudo nginx -t
sudo nginx -s reload
```
## 验证
1. **清除浏览器缓存**强制刷新Ctrl+F5
2. **打开开发者工具**F12查看Network标签
3. **确认API请求**应该是:
-`https://jarvis.van333.cn/dev-api/captchaImage`
- ❌ 不是 `http://134.175.126.60:30313/captchaImage`
## 注意事项
1. **必须重新打包**:修改环境变量后,必须重新运行 `npm run build:prod`
2. **清除浏览器缓存**:旧的打包文件可能被浏览器缓存
3. **检查nginx配置**:确保 `/dev-api/` 路径的代理配置正确
4. **检查后端服务**:确保后端服务运行在 `127.0.0.1:30313`
## 如果仍然有问题
1. 检查打包后的 `dist/static/js/` 目录中的JS文件搜索是否包含 `134.175.126.60`
2. 如果找到,说明打包时环境变量未生效,检查:
- `.env.production` 文件是否存在
- 文件内容是否正确(`VUE_APP_BASE_API=/dev-api`
- 是否在正确的目录(项目根目录)
- 重新打包前是否删除了旧的 `dist` 目录