news 2026/5/16 0:43:00

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

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
前后端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`
  1. 创建根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`
  1. 生成服务器私钥和证书请求文件（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）。
  1. 用根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"`
  1. 用根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`
  1. 将客户端证书和私钥打包为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',</
版权声明: 本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！
网站建设 2026/5/15 17:36:23

2025深圳主题趣味运动会靠谱服务商权威测评

在深圳&#xff0c;随着人们对健康和团队协作的重视&#xff0c;主题趣味运动会的需求日益增长。选择一家靠谱的服务商至关重要&#xff0c;下面将对市场上备受关注的活力体育进行测评。丰富的活动经验活力体育拥有多年举办主题趣味运动会的经验&#xff0c;近几年为香港中文大…

作者头像 李华
网站建设 2026/5/11 8:42:18

2025年国内软文营销平台权威盘点：主流软文发稿趋势与优选

市场格局演变&#xff1a;从流量红利到价值深耕2025年的软文营销行业已进入成熟发展阶段&#xff0c;市场呈现出鲜明的专业化、细分化特征。过去“一个平台通吃所有需求”的时代已经结束&#xff0c;取而代之的是基于不同企业需求、行业特性和传播目标的多元化选择生态。当前主…

作者头像 李华
网站建设 2026/5/14 4:41:30

GPUI Component实战精通：60+跨平台桌面组件深度解析与性能优化

GPUI Component实战精通&#xff1a;60跨平台桌面组件深度解析与性能优化 【免费下载链接】gpui-component UI components for building fantastic desktop application by using GPUI. 项目地址: https://gitcode.com/GitHub_Trending/gp/gpui-component 你是否正在寻找…

作者头像 李华
网站建设 2026/5/11 8:40:21

Rubberduck VBA项目完整指南：从入门到精通

Rubberduck VBA项目完整指南&#xff1a;从入门到精通 【免费下载链接】Rubberduck Every programmer needs a rubberduck. COM add-in for the VBA & VB6 IDE (VBE). 项目地址: https://gitcode.com/gh_mirrors/ru/Rubberduck 项目概览&#xff1a;你的VBA开发得力…

作者头像 李华
网站建设 2026/5/15 3:53:32

Springboot核心构建插件

Springboot核心构建插件 SpringBoot 构建插件的核心目标是让开发者通过简单命令完成打包可执行应用、一键运行应用、生成构建信息&#xff0c;无需手动处理依赖包、启动类、类加载器等底层细节。 对于 Maven 工程 spring-boot-maven-plugin 是核心<build><plugins>…

作者头像 李华
网站建设 2026/5/11 2:42:28

【Matlab】evalin( ‘base‘,‘var1‘)中的base是什么意思？

目录 evalin(base,var1)中base的详细解释 📌 一句话总结 🏗️ 工作区架构图示 🔍 详细解释 1. 基础工作区的特点 2. 为什么需要evalin(base, ...) 📊 evalin的完整用法 语法格式 应用示例 在MATLAB中，evalin函数用于在指定工作区中执行MATLAB表达式。 这里的…

作者头像 李华