host 映射域名访问 https HSTS 和本地证书问题

之前写过一篇：前端项目本地环境配置 HTTPS 以及在移动端使用的设置。

现在在做一个新的需求，需要对接一个登录模块，但是需要用 https 访问，而且需要用域名。所以虽然项目能够用 https 访问了，但是还没有配置域名。

于是在 host 中配置域名：

本机IP  chen.dev

但是访问显示：

点了“高级”之后：

于是一直以为是本地证书生成、配置的问题。在 Vite 项目中使用的是 vite-plugin-mkcert，CA 证书早就生成了。

host 配置改为：

本机IP  chen.com

访问 chen.com:5174

虽然也是有提示，但是“高级”点开，可以继续前往。

搜了一下：

出现这种区别的原因主要与HSTS（HTTP Strict Transport Security，严格传输安全）和证书的问题有关。

1. HSTS:

   • HSTS (HTTP Strict Transport Security)  是一种机制，允许网站声明它们只能通过HTTPS安全连接访问。浏览器会记住这种声明，并在后续访问中强制使用HTTPS。
   • 一旦HSTS被设置，浏览器就不会允许用户通过不安全的HTTP连接访问该站点，也无法通过忽略证书错误继续访问。出于安全原因，许多浏览器对某些顶级域名（如 .dev）自动默认启用HSTS。

2. 证书问题:

   • 当您访问 chen.dev 时，浏览器收到的证书与请求的域名不匹配（证书显示是 localhost），这引发了 ERR_CERT_COMMON_NAME_INVALID 错误。
   • 因为 .dev 顶级域名在浏览器中启用了HSTS，所以它严格要求有效的证书，用户无法通过点击高级按钮绕过此警告。
   • 当您访问 chen.com 时，虽然也存在证书不匹配的问题，但因为 .com 域名默认没有启用HSTS，所以浏览器允许用户通过点击高级按钮继续访问（尽管不建议这样做）。

总结来说，chen.dev 显示更严格的错误并且不允许绕过，是因为 .dev 顶级域名默认启用了HSTS。而 chen.com 没有这种限制，因此可以通过点击高级按钮继续访问。