为Vite配置证书：React+Golang本地开发环境问题排查

我正尝试为本地Vite开发服务器配置证书，客户端是React单页应用，后端为Golang。项目运行在WSL环境中，已Docker化。

Vite配置代码 #

import react from "@vitejs/plugin-react-swc";
import { defineConfig, UserConfigExport } from "vite";

export default defineConfig(() => {
  const config: UserConfigExport = {
    server: {
      port: 30330,
      https: {
        key: "../secrets/server.key.pem",
        cert: "../secrets/server.crt.pem",
      },
      proxy: {
        "/api": {
          target: "https://localhost:30331",
          changeOrigin: true,
          secure: false,
        },
      },
    },
    plugins: [react()],
  };

  return config;
});

Golang后端代码片段 #

cfg, err := config.LoadConfig()
if err != nil {
    utils.PrintRed(fmt.Sprintf("could not load config: %v", err))
    os.Exit(1)
}
// Load server certificate
cert, err := tls.LoadX509KeyPair("secrets/server.crt.pem", "secrets/server.key.pem")
if err != nil {
    log.Fatalf("Failed to load server cert: %v", err)
}

// Load and trust mkcert root CA
clientCAPool := x509.NewCertPool()
rootCA, err := os.ReadFile("secrets/rootCA.crt.pem") // Adjust path if needed
if err != nil {
    log.Fatalf("Failed to load root CA: %v", err)
}
clientCAPool.AppendCertsFromPEM(rootCA)

// HTTPS config with client cert verification
tlsConfig := &tls.Config{
    Certificates: []tls.Certificate{cert},
    ClientAuth:   tls.RequireAndVerifyClientCert,
    ClientCAs:    clientCAPool,
    MinVersion:   tls.VersionTLS12,
}

log.Printf("listening on port %s", cfg.Port)

server := &http.Server{
    Addr:      ":" + cfg.Port,
    TLSConfig: tlsConfig,
}

err = (server.ListenAndServeTLS("", ""))
utils.PrintRed(fmt.Sprintf("%v", err))

os.Exit(1)

问题现象 #

证书由mkcert生成，打开Web应用时未提示用户选择证书，服务器端报错：http: TLS handshake error from 172.19.0.1:51492: tls: client didn't provide a certificate，客户端的HTTPS API请求返回500且无响应体，服务器的请求处理器未被触发。

请问我遗漏了什么配置？

核心问题分析 #

你的Golang后端启用了tls.RequireAndVerifyClientCert，强制要求客户端提供经过验证的证书，但当前Vite代理和浏览器都没有配置客户端证书，导致TLS握手直接失败，请求根本无法到达后端处理器。

解决步骤 #

1. 生成客户端证书（使用mkcert）

执行以下命令生成客户端证书对：

mkcert -client localhost 127.0.0.1 ::1

将生成的localhost-client.pem和localhost-client-key.pem放到项目的secrets目录下。

2. 配置Vite代理的客户端证书

修改Vite配置中的proxy部分，添加客户端证书信息，让代理转发请求时携带证书：

proxy: {
  "/api": {
    target: "https://localhost:30331",
    changeOrigin: true,
    secure: false, // 本地自签证书跳过验证
    ssl: {
      key: "../secrets/localhost-client-key.pem",
      cert: "../secrets/localhost-client.pem",
    },
  },
},

3. 浏览器端配置（若直接访问后端API）

如果你的React应用直接调用后端API（不通过Vite代理），需要将客户端证书导入浏览器：

• Chrome：设置 → 隐私和安全 → 安全 → 管理证书 → 「个人」标签页 → 导入生成的客户端证书和私钥
• Firefox：选项 → 隐私与安全 → 证书 → 查看证书 → 「你的证书」 → 导入证书文件

4. 验证客户端证书与后端CA的兼容性

确保客户端证书由后端加载的rootCA.crt.pem签发，执行以下命令验证：

openssl verify -CAfile secrets/rootCA.crt.pem secrets/localhost-client.pem

输出OK则说明证书验证通过。

5. Docker环境路径校验

由于项目已Docker化，需确认：

• 证书文件已正确挂载到容器内的对应路径
• Vite和Golang配置中的证书路径是容器内部的路径，而非WSL主机路径

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