Windows环境下vscode Live Server插件如何开启https

Posted cnkker

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Windows环境下vscode Live Server插件如何开启https相关的知识,希望对你有一定的参考价值。

0x01 vscode http插件 Live Server如何开启https

在本机端的开发环境下,如果要测试一些需要HTTPS的功能可以使用mkcert给自己颁发凭证

技术图片

 

 

0x02 安装步骤如下:

1、安装 mkcert

安装环境:Windows 7+ / Windows Server 2003+

1)以管理员身份运行powershell

2)执行命令: Get-ExecutionPolicy,如果系统返回 Restricted,则在执行命令:Set-ExecutionPolicy AllSigned ,选择 A(全是)

3)执行命令:

Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString(‘https://chocolatey.org/install.ps1‘))

4)等待数秒,安装完成

5)执行choco -?验证是否安装成功 

     具体详细安装方法见:https://chocolatey.org/install

     安装完成后,执行命令 choco install mkcert,等待安装完成。

 

2、安装本地CA

将本地CA 加入系统的信任清单内:

执行命令  mkcert -install 

显示下面结果,安装完成

Created a new local CA at "C:Users**AppDataLocalmkcert" ??
The local CA is now installed in the system trust store! ??

 

3、生成凭证

 

mkcert example.com "*.example.com" example.test localhost 127.0.0.1 ::1

返回:

Using the local CA at "C:Users**AppDataLocalmkcert" ?

Created a new certificate valid for the following names ??(对应以下信任域名)
 - "example.com"
 - "*.example.com"
 - "example.test"
 - "localhost"
 - "127.0.0.1"
 - "::1"

Reminder: X.509 wildcards only go one level deep, so this won‘t match a.b.example.com ??

The certificate is at "./example.com+5.pem" and the key at "./example.com+5-key.pem" ?

在当前文件夹内生成2个文件:

example.com+5.pem 和 example.com+5-key.pem
分别是证书文件和私钥

4、设置live server

开启 settings.json 配置文件,输入以下内容,并将cert, key 的路径修改为刚刚创建的文件路径

 

"liveServer.settings.https": {
    "enable": false, //set it true to enable the feature.
    "cert": "D:\\https\\example.com+5.pem", //full path
    "key": "D:\\https\\example.com+5-key.pem", //full path
    "passphrase": ""
},

 

具体参考:https://github.com/ritwickdey/vscode-live-server/blob/master/docs/settings.md

 



以上是关于Windows环境下vscode Live Server插件如何开启https的主要内容,如果未能解决你的问题,请参考以下文章

VSCode 中使用 Live Server 进行 Debug

windows下配置VScode,写C++, 使用opencv库和openMVG依赖库 : windows下, VSCode配置C++环境

vscode怎么使用live server

windows环境下配置Vscode+MingGW 学习1

windows环境下配置Vscode+MingGW 学习1

JAVA 基础开发环境 vscode 搭建 Windows下VSCode编译运行简单java