前后端HTTPS及证书配置完整流程

前后端HTTPS及证书配置完整流程

mTLS双向认证请求测试

本文档详细记录前后端项目配置HTTPS协议、生成并部署证书、实现mTLS双向认证的全过程，适用于Vue3+Vite前端与NestJS后端架构（其他架构可参考核心逻辑）。配置完成后可实现前端与后端的安全HTTPS通信，并通过mTLS双向认证确保接口访问安全性。

一、前期准备

1.1 环境依赖

• 操作系统：Windows/macOS/Linux（本文以macOS为例，Windows命令逻辑一致，需调整路径格式）

• 工具：OpenSSL（用于生成证书，macOS/Linux默认自带，Windows需单独安装并配置环境变量）

• 后端：NestJS（已初始化项目，需安装@nestjs/platform-express等核心依赖）

• 前端：Vue3+Vite（已初始化项目，需安装axios、node-forge等依赖）

• 其他：终端/命令行工具、浏览器（Chrome/Firefox等）

1.2 核心概念说明

• HTTPS：基于TLS/SSL的HTTP协议，通过证书验证服务器身份，加密传输数据

• 根CA证书：自签证书的根证书，用于签发服务器证书和客户端证书，需导入系统/浏览器信任库

• 服务器证书（server.crt/key）：后端服务使用的证书，用于前端访问后端时验证后端身份

• 客户端证书（client.p12）：前端请求后端时携带的凭证，用于后端验证前端身份（mTLS双向认证核心）

• mTLS：双向 TLS 认证，同时验证服务器和客户端身份，比单向HTTPS更安全

二、证书生成（核心步骤）

所有证书通过OpenSSL生成，按“根CA证书 → 后端服务器证书 → 前端客户端证书”的顺序生成，确保证书链完整。

2.1 生成根CA证书（用于签发其他证书）

1. 创建根CA工作目录（统一管理证书文件）

mkdir-p/opt/ca/root cd/opt/ca/root

新建子目录（存放证书、私钥、请求文件等）

mkdir-p certs crl newcertsprivatechmod700private# 初始化证书索引文件和序列号文件 touch index.txt echo1000>serial`

2. 创建根CA配置文件（my-ca.cnf）

[ca]default_ca=CA_default[CA_default]dir=/opt/ca/root certs=$dir/certs crl_dir=$dir/crl new_certs_dir=$dir/newcerts database=$dir/index.txt serial=$dir/serial RANDFILE=$dir/private/.rand default_days=3650default_md=sha256 policy=policy_strict[policy_strict]countryName=supplied stateOrProvinceName=supplied organizationName=supplied organizationalUnitName=optional commonName=supplied emailAddress=optional[req]default_bits=2048distinguished_name=req_distinguished_name x509_extensions=v3_ca[req_distinguished_name]countryName=CountryName(2letter code)stateOrProvinceName=StateorProvinceName(full name)localityName=LocalityName(eg,city)organizationName=OrganizationName(eg,company)organizationalUnitName=Organizational UnitName(eg,section)commonName=CommonName(eg,fully qualified host name)emailAddress=Email Address[v3_ca]subjectKeyIdentifier=hash authorityKeyIdentifier=keyid:always,issuer basicConstraints=critical,CA:truekeyUsage=critical,digitalSignature,cRLSign,keyCertSign`

#3.生成根CA私钥和根证书 # 生成根CA私钥（ca-root.key.pem），设置密码（记住密码，后续签发证书需使用） openssl genrsa-aes256-outprivate/ca-root.key.pem4096chmod400private/ca-root.key.pem # 生成根CA证书（ca-root.crt.pem），有效期10年 openssl req-config my-ca.cnf-keyprivate/ca-root.key.pem-new-x509-days3650-sha256-extensions v3_ca-outcerts/ca-root.crt.pem chmod444certs/ca-root.crt.pem`执行命令时需按提示输入信息（国家、省份、组织等），确保Common Name（CN）填写有辨识度的名称（如“DevRootCA”）。

2.2 生成后端服务器证书（server.crt/key）

1. 进入后端项目目录，创建证书存放目录

# 进入后端项目根目录（替换为你的后端项目路径） cd/Users/troyzheng/code/api/2025-10-31-fileTransportSystem # 创建证书目录 mkdir-p certs cd certs`

2. 生成服务器私钥和证书请求文件（CSR）

# 生成服务器私钥（server.key.pem） openssl genrsa-outserver.key.pem2048chmod400server.key.pem # 生成证书请求文件（server.csr.pem） openssl req-new-key server.key.pem-outserver.csr.pem-subj"/C=CN/ST=JS/L=NJ/O=DevBackend/OU=NestJS/CN=localhost"`参数说明：C（国家）、ST（省份）、L（城市）、O（组织）、OU（部门）、CN（通用名，需与后端服务地址一致，本地调试填localhost）。

3. 用根CA签发服务器证书

# 签发服务器证书（有效期1年），使用根CA配置文件 openssl ca-config/opt/ca/root/my-ca.cnf-extensions v3_server-days365-inserver.csr.pem-outserver.crt.pem-batch chmod444server.crt.pem`签发成功后，后端certs目录下会生成`server.crt.pem`（证书）和`server.key.pem`（私钥）。

2.3 生成前端客户端证书（client.p12）

1. 在后端证书目录继续生成客户端私钥和CSR

# 生成客户端私钥（client.key.pem） openssl genrsa-outclient.key.pem2048chmod400client.key.pem # 生成客户端证书请求文件（client.csr.pem） openssl req-new-key client.key.pem-outclient.csr.pem-subj"/C=CN/ST=JS/L=NJ/O=DevFrontend/OU=Vue3/CN=localhost"`

2. 用根CA签发客户端证书

# 签发客户端证书（有效期1年），指定客户端扩展 openssl ca-config/opt/ca/root/my-ca.cnf-extensions v3_client-days365-inclient.csr.pem-outclient.crt.pem-batch chmod444client.crt.pem`

3. 将客户端证书和私钥打包为p12格式（前端可直接解析）

# 生成client.p12，设置密码（前端解析需使用此密码，如Vue3@2025!） openssl pkcs12-export-inkey client.key.pem-inclient.crt.pem-outclient.p12-name"client-cert"chmod444client.p12`执行命令时需输入密码并确认，记住此密码（后续前端配置需用到）。生成成功后，后端certs目录下会新增`client.p12`文件。

2.4 证书文件整理

生成完成后，核心证书文件清单如下，后续需按路径要求放置：

• 根CA证书：/opt/ca/root/certs/ca-root.crt.pem（需导入系统/浏览器）

• 后端服务器证书：后端项目/certs/server.crt.pem、后端项目/certs/server.key.pem

• 前端客户端证书：后端项目/certs/client.p12（需复制到前端项目）

三、后端配置（NestJS）

后端配置核心：启用HTTPS服务、加载服务器证书、配置mTLS双向认证、设置跨域允许前端HTTPS地址。

3.1 配置HTTPS服务

1. 修改后端项目根目录的main.ts，加载证书并启动HTTPS服务

import{NestFactory}from'@nestjs/core';import{AppModule}from'./app.module';import*asfsfrom'fs';import*aspathfrom'path';import{CorsOptions}from'@nestjs/common/interfaces/external/cors-options.interface';asyncfunctionbootstrap(){// 1. 读取服务器证书和私钥consthttpsOptions={cert:fs.readFileSync(path.join(__dirname,'..','certs',</