让 localhost 支持 https 访问

findxc commented 3 years ago

为啥有这个需求

因为当前项目是通过 cookie 来鉴权的，然后也有跨域的需求，所以 Set-Cookie 中的 SameSite 值只能设为 None 。

而由于 SameSite 为 None 的话一定需要设置 Secure 。

而如果 Secure 的话就只能走 https 。

由于之前本地开发都是 http://localhost 这样，然后 Set-Cookie 无效，始终登录不了系统。

41FCC154-F665-4E97-AE66-937146DBF8A8

详见 SameSite cookies - HTTP | MDN 。

使用 mkcert 来生成证书

https://github.com/FiloSottile/mkcert 这个库使用十分简单。

安装好 mkcert 这个库后，先执行 mkcert -install ，然后再执行 mkcert localhost 127.0.0.1 即可在当前路径下生成证书文件。

你还可以把自己内网 ip 也加进去，这样别人可以通过内网 ip 以 https 的方式访问你本地。

配置 https 使用生成的证书

可以把证书放在一个比较通用的路径下，这样大家约定都使用这个路径，比如 mac 的 ~/ ，然后在 node 里面可以通过 process.env.HOME 来取得这个路径值。

然后我们在项目的打包配置的 devServer 里面加上 https 配置即可，详见 devServer.https | webpack 。

import fs from 'fs';

const httpsKeyPath = process.env.HOME + '/localhost-key.pem';
const httpsCertPath = process.env.HOME + '/localhost.pem';

if (fs.existsSync(httpsKeyPath)) {
  config.devServer = {
    https: {
      key: fs.readFileSync(httpsKeyPath),
      cert: fs.readFileSync(httpsCertPath),
    },
  };
}

这样访问 https://localhost 就 ok 了。

但是还有一个问题，就是你访问 http 的时候也会被重定向到 https 去。

如果想清除 http 自动到 https 的重定向，打开 chrome://net-internals/#hsts ，然后在页面底部 Delete domain security policies 输入 localhost 然后删除就好了。但是这个只是一次性的。

测试了一下对于域名 chrome 就会有这个表现，所以如果不想被重定向就只有使用 ip ，也就是 127.0.0.1 去访问。

sufuwang commented 2 years ago

tql

NoirVoider commented 1 year ago

chrome://flags/#unsafely-treat-insecure-origin-as-secure , 也可以试试更方便点摄像头定位之类的本地环境调试

findxc / blog