react 项目以 https 协议启动

1、原因

项目开发中需要用到定位功能，无论是里H5本身的定位，还是百度地图定位中的浏览器定位，其实最终使用的都是 H5 定位功能

这个功能在 edge 和 firefox 中是可以使用的，但是 chrome 要求站点必须使用 httpx 协议访问才可以使用定位功能

也就是说要让我们当前开发的项目运行在 https 协议下

上线之后这个比较简单，安装证书即可

本地开发环境中可以按照如下步骤解决

2、解决方案

按照如下流程操作即可

• 安装 mkcert
• 生成证书
• 拷贝证书到项目跟目录
• 修改启动命令
• 安装依赖包

 

2.1 安装证书

从如下地址下载证书，无需安装

 

 

2.2 安装证书

打开命令行

将下载的证书文件拖到命令行中后面加上 -install 命令

PS E:\2019_online\plus> E:\2019_online\plus\mkcert-v1.4.3-windows-amd64.exe -install

2.3 生成证书

将下载的证书文件拖到命令行中后面加上 localhost 127.0.0.1

PS E:\2019_online\plus> E:\2019_online\plus\mkcert-v1.4.3-windows-amd64.exe localhost 127.0.0.1

当前目录下会生成两个证书文件，这里的两个文件一个是key另一个是cert。

 

2.41 使用证书文件

将上面两个文件拷贝到 react 项目的根目录下

 

 

并在 package.json 文件的启动命令前加上如下代码

cross-env HTTPS=true SSL_CRT_FILE=localhost+1.pem SSL_KEY_FILE=localhost+1-key.pem

当然，需要先安装如下的包

 yarn add cross-env

再次启动项目即可

npm start