ruoyi vue集成https

### Ruoyi Vue 项目中配置和集成 HTTPS

在 Ruoyi Vue 项目中集成 HTTPS 主要涉及服务器端的 Nginx 或 Tomcat 配置，以及前端应用的安全设置。

#### 1. 后端服务 (Nginx/Tomcat) 的 SSL 配置

对于基于 Java Spring Boot 构建的服务端部分：

- **Tomcat 方式**

如果使用内嵌的 Tomcat 来部署应用程序，则可以在 `application.yml` 文件里指定 keystore 和 truststore 参数来启用 HTTPS 支持[^1]。

server:
  port: 8443
  ssl:
    key-store-type: PKCS12
    key-store: classpath:keystore.p12
    key-password: secret

上述 YAML 片段展示了如何通过 application.yml 设置开启 HTTPS 协议所需的证书路径及其密码等信息。

- **Nginx 反向代理方式**

更常见的做法是利用 Nginx 做反向代理并处理 TLS 握手过程。这不仅简化了后端逻辑而且提高了性能与安全性。编辑 nginx.conf 添加如下内容[^5]:

server {
    listen       443 ssl;
    server_name  localhost;

    ssl_certificate      cert.pem;
    ssl_certificate_key  key.pem;

    location / {
        proxy_pass http://localhost:8080;
        ...
    }
}

这段 NGINX 配置指定了监听 443 端口并通过提供的 PEM 编码 X.509 证书文件提供安全连接；同时将请求转发给本地运行的应用程序实例。

#### 2. 前端资源加载调整

当启用了 HTTPS 后，确保所有的静态资源链接都采用相对 URL 或者完整的 https:// 开头的形式，防止混合内容警告。另外，在开发环境中可以借助浏览器开发者工具中的网络面板检查是否有任何 HTTP 请求被发出，并及时修正它们。

#### 3. 客户端 API 调用更新

修改 axios 默认 baseURL 为带有 "https://" 前缀的目标地址，保证前后端交互也走加密通道。通常是在 src/utils/request.js 中完成此操作:

import axios from 'axios'

// 创建 Axios 实例
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // api base_url
  timeout: 5000                           // request timeout
})

export default service

确保 VUE_APP_BASE_API 环境变量指向的是一个合法有效的 HTTPS 地址。