当前位置： 首页 > news >正文

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

news 2026/3/27 1:59:08

前后端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',</
http://www.jsqmd.com/news/78309/

相关文章：

  • 2025年年终市场地位认证机构推荐：从合规风险规避到商业价值赋能的全维度对比与2家实力机构清单 - 十大品牌推荐
  • MeiliSearch
  • 企业微信开发总卡壳？试试cpolar，回调调试超顺畅
  • 2025年年终GPU服务器公司推荐：基于总拥有成本与系统演化能力的深度评估，5家实力厂商聚焦 - 十大品牌推荐
  • 2025年年终市场认证公司推荐：聚焦品牌市场地位证明需求，专家深度解析5家权威服务商选购指南 - 十大品牌推荐
  • 快速上手Kickstarter Android：新手指南与进阶技巧
  • GPUI Component实战精通：60+跨平台桌面组件深度解析与性能优化
  • 市场地位认证如何选择靠谱机构？2025年年终最新权威评测与2家核心服务商推荐 - 十大品牌推荐
  • 虾皮做杂货铺好还是做垂直类目好
  • AI Agent构建实战：v0s提示词库与Latitude平台的无缝集成
  • 2025年12月企业境外投资备案/odi登记/境外投资备案/odi备案服务商户全面解析：卓信企业登顶 - 2025年11月品牌推荐榜
  • 14. UGUI屏幕适配
  • 永磁同步电机双矢量MPC模型预测电流控制探索
  • 按照官网适配的版本配置了MindSpore等，还是一直报错
  • 北京口碑最好的律师事务所排名2025-2026：专业度与性价比综合测评白皮书 - 苏木2025
  • 江协科技10-4 I2C硬件通信
  • 北京市生成式人工智能服务已备案信息公告（2025年12月11日）
  • 基于 Monorepo 封装 Input 组件为公共组件库（全流程落地）
  • Springboot少儿教育网站k5t0n（程序+源码+数据库+调试部署+开发环境）带论文文档1万字以上，文末可获取，系统界面在最后面。
  • TIA博途虚拟机终极配置指南：V17+V16+V15.1全版本一键部署
  • 【开题答辩全过程】以 基于JAVA的社团管理系统为例，包含答辩的问题和答案
  • 【论文阅读】PLUS: Plug-and-Play Enhanced Liver Lesion Diagnosis Model on Non-Contrast CT Scans
  • 数据库高可用架构：主从复制、集群与分片技术的综合应用
  • 2025/12/12 今天学的day5的lecode203和206
  • 宝可梦随机化器：开启你的专属冒险，每一次都是全新旅程！
  • 智慧实验室哪家好？智慧危化品管理系统、智慧实验室物资管理系统/环境控制系统优质供应商厂家推荐 - 品牌推荐大师1
  • 30亿参数重塑企业AI格局：ERNIE 4.5如何用效率革命应对落地挑战
  • Springboot核心构建插件
  • 2025电厂水处理计量泵推荐榜：聚焦可靠性，助力机组稳定运行 - 优质品牌商家
  • 大二计算机生的Vue.js高分学习笔记：从课程作业到实习储备