使用vite-plugin-mkcert仍遇连接非私密问题求助

问题分析 #

你手动执行mkcert命令生成证书，同时启用了vite-plugin-mkcert，两者可能产生冲突，导致浏览器不识别插件生成的信任证书；而不用插件时，代理请求遇到自签证书，Node.js默认拒绝信任，抛出[DEPTH_ZERO_SELF_SIGNED_CERT]错误。

解决方案 #

方案1：修复vite-plugin-mkcert的证书信任问题 #

1. 清理冲突证书

   • 删除手动生成的localhost.pem和localhost-key.pem文件
   • 找到vite-plugin-mkcert的证书存储目录（通常在node_modules/.vite-plugin-mkcert或系统临时目录），清空其中的所有证书文件
   • 重新执行：

     mkcert -uninstall
     mkcert -install
     

   确保mkcert根证书正确安装到系统信任库。

2. 调整Vite配置
   移除手动设置的server.https: true，让插件自动处理HTTPS配置，避免冲突：

   import { defineConfig } from 'vite'
   import mkcert from 'vite-plugin-mkcert'
   
   export default defineConfig({
     plugins: [
       mkcert({
         hosts: ['localhost', '127.0.0.1'] // 指定要生成证书的域名，确保和访问地址一致
       })
     ]
   })
   

3. 确认系统和浏览器信任根证书

   • Windows：打开「证书管理器」，在「受信任的根证书颁发机构」中找到mkcert开头的根证书，确认其状态为“信任”
   • Mac：打开「钥匙串访问」，在「系统」->「证书」中找到mkcert根证书，右键选择「显示简介」，将「信任」设置为「始终信任」
   • 浏览器：在证书管理页面确认mkcert根证书已被信任（如Chrome：设置→隐私和安全→安全→管理证书）

方案2：不使用vite-plugin-mkcert，解决代理报错 #

如果不想依赖插件，可在Vite代理配置中忽略证书校验（仅开发环境使用，生产环境绝对禁止）：

import { defineConfig } from 'vite'

export default defineConfig({
  server: {
    https: true, // 使用Vite默认自签证书
    proxy: {
      '/api': {
        target: 'https://你的代理目标地址',
        changeOrigin: true,
        secure: false // 禁用证书校验，解决自签证书报错
      }
    }
  }
})

注意：secure: false仅适用于开发环境，生产环境必须使用受信任的合法证书。

内容的提问来源于stack exchange，提问作者Pavel Perevezencev