快速搭建基于HTTPS的本地开发环境

 我来答
温屿17
2022-09-01 · TA获得超过1.2万个赞
知道小有建树答主
回答量:827
采纳率:0%
帮助的人:92.6万
展开全部

为什么本地开发要使用HTTPS?

因为有很多Web API必须在HTTPS环境下才可以使用。比如,Clipboard API and events(https://www.w3.org/TR/clipboard-apis)中的 navigator.clipboard 对象是通过扩展 Navigator 接口定义的:

在此,partial的意思就是扩展Navigator接口,给它增加一个Clipboard类型的只读成员属性clipboard。[SecureContext, SameObject]中的两个关键字是“扩展属性”(extended attribute),在这里修饰接口成员clipboard。SecureContext表示navigator只能在“安全上下文”中暴露clipboard属性,SameObject表示每次访问navigator.clipboard必须都返回相同的值。(参见:https://heycam.github.io/webidl/#SecureContext和https://heycam.github.io/webidl/#SameObject。)

关于“安全上下文”,W3C的Secure Contexts文档(https://w3c.github.io/webappsec-secure-contexts/)中有详细解释。根据MDN,全站HTTPS和通过http://localhost交付的网页是安全的。可以通过window.isSecureContext属性来检测当前上下文是否安全。

另外还有一个重要原因,就是有时候HTTP的本地请求可能会被HTTPS服务器拒绝。

无论如何,我们在开发实践中都有可能碰到将本地Web服务HTTPS化的需求。这时候,我们可以创建自己私钥并签名一个根证书,并在开发环境中配置安装和信任自己的根证书。然后再通过这个根证书和私钥签发相应域名的SSL证书。

好吧,开始干吧。

首先生成一个RSA-2048加密的私钥,保存为localCA.key。生成过程中,会提示输入密码(pass phrase),以后在使用生成的私钥签发证书时都要输入这个密码。

接下来用这个私钥生成一个根SSL证书,保存为localCA.pem。有效期为1825天(5年)。

在此期间,会提示输入:

打开macOS中的“钥匙串访问”应用:

1、“文件 > 导入项目”,选择localCA.pem,打开(需要输入密码)

2、双击导入的证书,在“信任”中选择“始终信任”

3、退出当前窗口(需要输入密码),“此证书已标记为受所有用户信任”

首先,创建域名SSL证书的私钥,“ext”的意思在这里表示“泛域名”,可以随意命名

然后,用这个密钥创建一个CSR(Certificate Signing Request,证书签名请求)文件

在创建证书之前,还要创建一个配置文件,将其命名为ext.yourdomain.com.ext,包含如下内容:

最后,为*.yourdomain.com域名签发SSL证书

把生成的证书和私钥文件复制到相应目录

假设使用Webpack的devServer,配置如下:

配置HOST文件:

重启服务:

再换一个子域名:

参考资料

已赞过 已踩过<
你对这个回答的评价是?
评论 收起
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式