现在浏览器对安全的限制越来越严格,有些功能必须要在https安全环境下才能访问,比如在移动端浏览器上使用 navigator.mediaDevices.getUserMedia() 调用摄像头,否则 navigator.mediaDevices 对象会是 undefined 。
当然生产环境购买申请 ssl证书就可以实现 https了,但是本地开发环境是没法申请证书的,而且一般的自签名证书已经不好使了,并且操作也稍显麻烦。
Google 的开源项目mkcert可以一条命令生成浏览器信任的本地证书,支持自定义域名如 example.test 、localhost 也支持 IP 127.0.0.1 、192.168.1.100 等。。。
(其实是两条。。。)
$ mkcert -install #生成根证书,并将其加入到系统信任证书中
$ mkcert test.com "*.test.com" localhost 127.0.0.1 192.168.0.110 ::1 #可以一次加入多个主机名(域名、IP等)
其实跟之前的自签名证书主要的区别是多了前面根证书的步骤。
这样就舒服多了,也没有安全提醒了:
项目地址:https://github.com/FiloSottile/mkcert
PS:vscode liveserver插件的https配置方法:
"liveServer.settings.https": {
"enable": true,
"cert": "/Users/dubox/dev/docker/work/github/https/test.com+5.pem",
"key": "/Users/dubox/dev/docker/work/github/https/test.com+5-key.pem",
"passphrase": ""
}