非导入证书方式实现secure https访问本地服务

背景

想要使用https访问本地服务, 实现同正式环境一致的访问环境来调试cookie跨域是一个难题, 搜索引擎提供的教程一般都是要么需要添加本地证书流程(流程很麻烦), 要么非安全https(和安全https的cookie策略不同)

现摸索出一种方式, 实现了安全https访问本地服务, 仅通过一个注册域名和aceme.sh

原理

• 安全https需要直接条件是合法机构签发的证书
  • 能否不需要域名(通过本地host进行域名解析)? ❌ aceme.sh必须要注册域名
  • 能否不通过服务器创建域名? ✔ 免费证书acme.sh传统的签发方式需要服务器, 但是dns records方式可以不需要服务器
• dns可以解析到本地ip, 只需要本地网关服务器tls握手时提供通过acme.sh签发的合法证书, 则可以实现安全https访问本地服务

pre requirements

1. 购买的域名
2. 可以自定义配置dns记录, 例如cloudflare
3. 本地反代网关程序

步骤简述

我是用的是cloudflare,apisix作为网关,也可以使用同类进行替换 具体操作详见各文档, 这里只记录关键步骤

1. acme.sh通过CF DNS生成域名证书
2. 域名dns配置到本地ip
3. apisix admin api 添加生成的证书
4. apisix 配置域名到本地ip的路由

注意事项

如果有代理, 需要过滤此域名, 因为是本地ip

如果跨域还是有问题,排查:

1. 前端是否用了mock.js

应用适配

开发框架需要区别于普通http的配置变更

vite 配置 hmr vite.config.ts

server:{
    hmr:{ //如果vite之外又套了一层反代,那么需要手动指定ws地址,否则会连接失败无限刷新  
      protocol: 'ws',  
      host: 'localhost',  
      port: 5173,  
    }
}

如果使用了apisix, 另外需要apisix route设置开启Websocket

koa.js配置 允许secure cookie

pillarjs/cookies: Signed and unsigned cookies based on Keygrip (github.com)

app.proxy=true