google 浏览器本地使用 https 的解决办法

问题描述

本地开发 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 连接。