使用ngrok通过TLS/SSL连接https://localhost的浏览器访问问题
搞定带绿色安全锁的localhost访问(适配Stripe PaymentRequest)
我太懂你这种折腾半天的憋屈了——试了TLS、TCP连接,结果浏览器不认tls://开头的URL,就想弄个带绿色安全锁的localhost测Stripe PaymentRequest,对吧?别纠结自定义协议头了,浏览器只认标准的https://,给你两个最实用的解决方案:
方案1:用ngrok生成带HTTPS的公网隧道(最快上手)
- 先确保你的本地服务已经能通过
https://localhost:xxxx访问(如果还没配本地HTTPS,直接看方案2) - 打开终端跑这条命令:
ngrok http https://localhost:xxxx
(这里是把你本地的HTTPS服务直接映射成ngrok的HTTPS公网地址,不是普通的HTTP映射) - 运行后会弹出类似
https://abc123.ngrok.io的地址,直接复制到浏览器打开就行——这个地址自带正规SSL证书,绿色安全锁直接显示,完全符合Stripe PaymentRequest的要求 - 小提示:每次重启ngrok地址会变,测试用足够,要是需要固定地址可以考虑ngrok付费版
方案2:给localhost配置本地SSL证书(无需公网)
要是不想用公网隧道,直接在本地搞定安全锁:
- 用
mkcert工具生成本地可信证书(比手动折腾OpenSSL简单10倍)- 安装mkcert:Mac用
brew install mkcert,Windows可以用Chocolatey或者直接下载二进制文件 - 初始化本地信任CA:
mkcert -install(这一步会自动把根证书加到系统信任库,不用手动去浏览器加) - 生成localhost的证书:
mkcert localhost 127.0.0.1 ::1
- 安装mkcert:Mac用
- 把生成的
.pem证书文件和.key私钥文件配置到你的本地服务里(比如Node.js、Nginx、Apache,具体配置搜你用的框架+HTTPS配置就行) - 启动服务后打开
https://localhost:xxxx,浏览器直接显示绿色安全锁,完美支持Stripe PaymentRequest
重要提醒
别再碰tls://开头的URL了——浏览器根本不支持把它作为网页访问的协议,TLS是底层加密协议,网页访问还是得靠https://来承载。另外Stripe PaymentRequest只认HTTPS环境,不管是公网的HTTPS还是本地的HTTPS(localhost的HTTPS官方是认可的),只要有绿色安全锁就没问题。
内容的提问来源于stack exchange,提问作者Freewalker




