Windows系统下React本地项目HTTPS启动问题及解决方法

问题描述 #

开发React应用时，要求应用在https://localhost:3000启动，但实际始终默认打开http://localhost:3000，在Windows系统下尝试多种配置均未解决该问题。

尝试过的无效操作 #

• 生成自签名证书并放置到项目根目录
• 在package.json中配置两个启动命令：

"start": "set HTTPS=true && set REACT_APP_GIT_VERSION=$(git rev-parse head) && react-scripts start",
"safeStart": "export HTTPS=true&&SSL_CRT_FILE=cert.pem&&SSL_KEY_FILE=key.pem react-scripts start",

• 执行npm start或set HTTPS=true&&npm start：应用可正常启动，但仍使用HTTP协议
• 执行npm safeStart或set HTTPS=true&&npm safeStart：触发SSL未配置错误

成功解决步骤 #

1. 使用mkcert工具生成SSL证书
2. 修改package.json中的start命令，明确指定证书文件的绝对路径：

"start": "set HTTPS=true&&set SSL_CRT_FILE=C:/Windows/System32/cert.crt&&set SSL_KEY_FILE=C:/Windows/System32/cert.key&&react-scripts start",

3. 执行npm start命令，应用成功在https://localhost:3000启动

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