You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

使用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倍)
    1. 安装mkcert:Mac用brew install mkcert,Windows可以用Chocolatey或者直接下载二进制文件
    2. 初始化本地信任CA:mkcert -install(这一步会自动把根证书加到系统信任库,不用手动去浏览器加)
    3. 生成localhost的证书:mkcert localhost 127.0.0.1 ::1
  • 把生成的.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

火山引擎 最新活动