开发测试环境用HTTPS证书的正确打开方式

为什么测试环境也需要HTTPS

很多团队在开发阶段图省事，直接用HTTP跑前端页面和接口。但现实是，越来越多前端功能依赖安全上下文，比如地理位置、摄像头调用、Service Worker注册，这些在非HTTPS环境下根本跑不起来。

还有个典型场景：前端本地联调时发现某些API请求莫名失败，查了半天才发现是浏览器把带凭据的跨域请求自动拦截了——因为目标服务虽然部署在内网，但没走HTTPS，被判定为不安全上下文。

自己生成证书还是用工具

最原始的办法是用OpenSSL手动生成自签名证书。命令不难，但每次配新服务都要重复操作，同事拉代码还得手动导入根证书，体验很差。

现在更常见的做法是使用专用工具快速搭建可信的本地HTTPS环境。比如mkcert，它能自动在本地生成一个被系统信任的CA，并签发合法的localhost证书。

mkcert -install
mkcert localhost 127.0.0.1 ::1

上面两行命令执行完，就会生成localhost+IP的多域名证书，Nginx或Node服务直接引用就行。

配合开发服务器使用

以Node.js为例，启一个带HTTPS的本地服务非常简单：

const https = require('https');
const fs = require('fs');

const options = {
  key: fs.readFileSync('./localhost-key.pem'),
  cert: fs.readFileSync('./localhost.pem')
};

https.createServer(options, (req, res) => {
  res.writeHead(200);
  res.end('Hello from HTTPS dev server!');
}).listen(3000);

前端框架如Vue CLI、Create React App默认也支持https配置。在package.json启动命令里加个--https，再指定证书路径即可。

统一团队的证书策略

建议把证书生成过程写进项目脚本。比如在package.json里加一条：

"scripts": {
  "cert:dev": "mkcert -key-file key.pem -cert-file cert.pem localhost 127.0.0.1"
}

新成员入职，npm run cert:dev一键生成，避免各自为政导致的信任问题。也可以把本地CA导出共享，让全组电脑都信任同一个根证书，减少报错提示。

别忽视有效期和域名覆盖

自签证书通常只有90天有效期，过期后浏览器会弹警告。建议设置提醒，在CI流程中加入证书更新检查。另外如果项目涉及多个子域名（比如api.dev.local、admin.dev.local），记得用通配符或SAN扩展签发，否则前端请求照样会被拦。

生产环境不要复用测试证书

开发环境用自签证书没问题，但绝对不能带到预发布或生产环境。测试阶段要模拟真实HTTPS行为，可以使用Let's Encrypt的沙盒模式做自动化验证，提前暴露配置问题，而不是上线前才手忙脚乱申请正式证书。