前言
昨天群里有人问了一个问题，说是 React 项目如何在本地开发的时候开启 Https，看到这个问题，我也很好奇，因为我们有时候在对接第三方 Api 的时候，需要用Https发请求，比如地图的一些 Api。就查阅了下相关的文档，做了个 demo 试了下。下面我将自己的相关过程分享出来，希望能够给需要的人提供一点思路。
正文
-
修改React启动命令
首先我们使用 React 的脚手架
CREATE-REACT-APP初始化一个 demo 项目，打开package.json文件,修改启动命令"scripts": { "start": "HTTPS=true scripts/start.js", "build": "node scripts/build.js", "test": "node scripts/test.js" },修改后，我们先启动项目，发现浏览器提示不是私密连接
别急，我们才刚开始。 因为我们还没有有效的证书，这里认定我们的连接不安全，因此我们需要一个证书。
-
证书
证书的生成我们使用 mkcert ,当然了，我们需要先安装 mkcert
-
MacOs 安装 mkcert 可以使用 brew
brew install mkcert brew install nss //这里firefox -
Arch Linux 安装可以使用 yay
yay -S --noconfirm --needed go yay -S --noconfirm --needed mkcert -
Ubuntu 安装可以使用 apt-get
sudo apt-get updatesudo apt install wget libnss3-tools export VER="v1.4.3" && wget -O mkcert https://github.com/FiloSottile/mkcert/releases/download/${VER}/mkcert-${VER}-linux-amd64\ 下载文件后，使文件可执行并将二进制文件放在 `/usr/local/bin` 下面。 chmod +x mkcert\ sudo mv mkcert /usr/local/bin\ -
windows 安装可以使用 scoop
scoop bucket add extras scoop install mkcert
接下来需要创建CA根证书到本地，打开终端，输入
mkcert -install,然后生成证书，
mkcert localhost 127.0.0.1，//后面还可以继续空格添加其他域名或IP地址，默认是pem格式,如果想了解更多 mkcert 的命令，可以使用mkcert -help在终端中输入
mkcert -CAROOT命令，找到证书rootCA.pem在我们demo 项目的根目录中新建一个 .cert 的文件夹，将rootCA.pem 文件放入，然后在项目根目录的终端中执行
mkcert -key-file ./.cert/key.pem -cert-file ./.cert/rootCA.pem "localhost"回车执行，可以看到 .cert 文件夹中多了一个 key.pem 的证书文件
因为 .cert 文件夹的内容只是本地开发中使用的，所以我们可以加入到.gitignore 文件中
然后我们再修改 demo 项目的启动命令
"scripts": { "start": "HTTPS=true SSL_CRT_FILE=./.cert/rootCA.pem SSL_KEY_FILE=./.cert/key.pem node scripts/start.js", "build": "node scripts/build.js", "test": "node scripts/test.js" }这时候我们再次启动项目，可以看到已经ok了
-
感谢阅读，欢迎点赞评论
