# 解决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` 目录