解决HTTPS访问后端接口问题

问题现象

访问 https://jarvis.van333.cn 时，前端请求仍然是 http://134.175.126.60:30313/captchaImage，导致混合内容错误。

原因分析

缺少环境变量配置文件：.env.production 文件不存在，打包时使用了默认值
打包后的代码包含硬编码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. 重新打包项目

npm run build:prod

3. 部署到服务器

将 dist 目录中的文件部署到 /www/sites/jarvis.van333.cn/index/

4. 配置Nginx

确保使用 nginx-https.conf 中的配置，关键部分：

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

sudo nginx -t
sudo nginx -s reload

验证

清除浏览器缓存，强制刷新（Ctrl+F5）
打开开发者工具（F12），查看Network标签
确认API请求应该是：
- ✅ https://jarvis.van333.cn/dev-api/captchaImage
- ❌ 不是 http://134.175.126.60:30313/captchaImage

注意事项

必须重新打包：修改环境变量后，必须重新运行 npm run build:prod
清除浏览器缓存：旧的打包文件可能被浏览器缓存
检查nginx配置：确保 /dev-api/ 路径的代理配置正确
检查后端服务：确保后端服务运行在 127.0.0.1:30313

如果仍然有问题

检查打包后的 dist/static/js/ 目录中的JS文件，搜索是否包含 134.175.126.60
如果找到，说明打包时环境变量未生效，检查：
- .env.production 文件是否存在
- 文件内容是否正确（VUE_APP_BASE_API=/dev-api）
- 是否在正确的目录（项目根目录）
- 重新打包前是否删除了旧的 dist 目录

2.5 KiB Raw Permalink Blame History Unescape Escape