React中将http升级为https

用 create-react-app 构建一个程序，并且在本地运行，默认情况下会用 HTTP 协议为该程序提供服务。而在生产环境中运行的程序都用 HTTPS 进行服务，使用的腾讯地图定位组件，也需要HTTPS，不然就一直走失败逻辑。

方法一

package.json 文件的 scripts 部分中，有这样一行配置：

1

"start": "react-scripts start"

把它修改为：

1

"start": "HTTPS=true react-scripts start"

将环境变量 HTTPS 的值设置为 true

方法二

临时配置

直接在cmd环境配置即可，查看环境变量，添加环境变量，删除环境变量。

1
2
3
4
5
6
7
8

#首先查看是否存在 
set HTTPS
#如果不存在则添加环境变量 
set HTTPS=true
#环境变量追加值 set 变量名=%变量名%;变量内容 
#set path=%path%;C:\web;C:\Tools 
#某些时候需要删除环境变量 
set HTTPS=

永久配置

在系统的环境变量里面设置，HTTPS=true

这样做的原理是，在react项目中的scripts\start.js可以看到有这样一行

1

const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';

其中process.env属性返回一个包含用户环境信息的对象。依靠这个我们就可以给服务器上打上一个标签。

证书生成

window下生成本地证书：参考

在macOS ，Linux中

在项目根目录中运行：

1

openssl req -x509 -newkey rsa:2048 -keyout keytmp.pem -out cert.pem -days 365

然后运行：

1

openssl rsa -in keytmp.pem -out key.pem

在当前目录下会生成 cert.pem 和 key.pem 两个文件。

现在把 package.json 文件中的 start 脚本改为：

1

"start": "export HTTPS=true&&SSL_CRT_FILE=cert.pem&&SSL_KEY_FILE=key.pem react-scripts start",