2

问题描述

本地开发 http://localhost需要使用 HTTPS 运行,devServer 设置了 https: true,依然打不开页面,点击高级也没有继续前往的选项。

// webpack.config.js
devServer: {
  https: true,
  // ....
}

原因

HTTPS 网站是需要证书的,浏览器无法识别当前访问的 https 网站证书或验证有问题,所以要强制用户在键盘输入this-is-unsafe(这是不安全的),再次告知了风险。

解决方法

在当前页,直接在键盘上敲以下内容thisisunsafe

不是在地址栏输入!按下键盘上对应的字母就可以了。

此时打开的 https 是不安全的:

更深一步

在大多数情况下,本地开发 http://localhost 就可以满足需求。在浏览器中,它的行为与 HTTPS 非常类似。因此,部分无法在部署的 HTTP 网站上运行的 API 可以在 http://localhost 上运行。 这意味着开发人员只需要 在特殊情况下 才需要在本地使用 HTTPS,例如自定义主机名或跨浏览器的安全 cookie...

安全访问 https

使用以上方法,可以本地访问 https 页面,但是不安全。若想安全,需要 TLS 证书,但并非任何证书都会被浏览器接受:证书需要由您的浏览器信任的实体签名,这些实体称之为可信证书颁发机构 (CA)。

创建 TLS 证书

推荐使用 mkcert 为本地开发创建 TLS 证书。

工作原理如下:

  • 如果使用 HTTPS 在浏览器中打开本地运行的网站,浏览器将检查本地开发服务器的证书。
  • 在看到证书已由 mkcert 生成的证书颁发机构签名后,浏览器会检查它是否已注册为受信任的证书颁发机构。
  • mkcert 已被列为受信任的颁发机构,所以浏览器会信任该证书并创建 HTTPS 连接。

时倾
785 声望2.4k 粉丝

把梦想放在心中