Vite 开发服务器证书过期问题解决方案

问题描述

在使用 Vite 开发服务器时，控制台出现以下错误信息，然后接口请求失败：

09:43:21 [vite] certificate has expired

问题分析

根本原因

该错误通常由以下几种情况引起：

1. 本地 HTTPS 证书过期

   • 使用 vite-plugin-mkcert 生成的本地开发证书已过期
   • 手动配置的 SSL 证书文件过期

2. 代理目标服务器证书过期

   • 后端 API 服务器使用的 HTTPS 证书过期
   • 代理配置中的目标服务器证书无效

3. 自签名证书验证失败

   • 开发环境使用自签名证书
   • 浏览器或 Node.js 拒绝接受未验证的证书

项目具体情况分析

通过检查项目的 vite.config.ts 配置文件发现：

// HTTPS 配置被注释掉
// https: {
//   cert: './certs/cert.pem',
//   key: './certs/dev.pem',
// },
https: false,

// mkcert 插件被注释掉
// mkcert({
//   savePath: './certs',
//   force: true,
// }),

// 代理配置
proxy: {
  [VITE_APP_PROXY_PREFIX]: {
    target: VITE_SERVER_BASEURL,
    changeOrigin: true,
    rewrite: (path) => path.replace(new RegExp(`^${VITE_APP_PROXY_PREFIX}`), ''),
  },
}

结论：由于本地 HTTPS 被禁用，问题很可能来自于代理目标服务器（VITE_SERVER_BASEURL）的证书过期。

解决方案

方案一：禁用证书验证（推荐用于开发环境）

在 proxy 配置中添加 secure: false 选项：

proxy: {
  [VITE_APP_PROXY_PREFIX]: {
    target: VITE_SERVER_BASEURL,
    changeOrigin: true,
    secure: false, // 禁用 SSL 证书验证
    rewrite: (path) => path.replace(new RegExp(`^${VITE_APP_PROXY_PREFIX}`), ''),
  },
}

优点：

• 快速解决开发环境问题
• 不需要修改后端服务器配置
• 适用于自签名证书和过期证书

注意事项：

• 仅适用于开发环境
• 生产环境必须使用有效证书

方案二：更新后端服务器证书（生产环境推荐）

联系后端团队更新 VITE_SERVER_BASEURL 对应服务器的 SSL 证书。

方案三：启用本地 HTTPS（可选）

如果需要在本地使用 HTTPS：

1. 启用 mkcert 插件：

plugins: [
  mkcert({
    savePath: './certs',
    force: true,
  }),
  // ... 其他插件
]

2. 配置 HTTPS：

server: {
  https: {
    cert: './certs/cert.pem',
    key: './certs/dev.pem',
  },
  // ... 其他配置
}

实施步骤

立即解决方案（方案一）

1. 打开 vite.config.ts 文件
2. 在 proxy 配置中添加 secure: false
3. 保存文件并重启开发服务器

验证解决效果

重启 Vite 开发服务器后，检查：

• [ ] 控制台不再显示证书过期警告
• [ ] API 请求正常工作
• [ ] 页面功能正常

相关配置参数说明

参数	作用	适用场景
secure: false	禁用 SSL 证书验证	开发环境，证书过期/自签名
changeOrigin: true	修改请求头中的 origin	跨域代理
rewrite	重写请求路径	路径映射

最佳实践建议

1. 开发环境：使用 secure: false 快速解决证书问题
2. 测试环境：确保使用有效证书进行测试
3. 生产环境：必须使用有效的 SSL 证书
4. 团队协作：建议统一开发环境配置，避免个人配置差异

故障排除

如果问题仍然存在，请检查：

1. 环境变量：确认 VITE_SERVER_BASEURL 指向正确的服务器
2. 网络连接：确认能够访问目标服务器
3. 防火墙设置：确认没有被防火墙阻止
4. 代理配置：确认代理路径配置正确

相关文档

• Vite 配置参考
• Vite 服务器选项
• vite-plugin-mkcert

这份文档详细说明了：
1. **问题描述**：明确了遇到的证书过期错误
2. **原因分析**：从多个角度分析了可能的原因，并结合你的项目配置进行了具体分析
3. **解决方案**：提供了三种不同的解决方案，重点推荐了适合开发环境的快速解决方案