VSCode怎么开启本地HTTPS服务器进行WebRTC或者API接口调试

星明吖_3113

星明吖_3113

2026-03-23

278人浏览

原创

用 mkcert 可快速生成本地可信 https 证书,解决 webrtc 等 api 因非安全上下文被禁用的问题:先运行 mkcert -install 注入根证书,再执行 mkcert localhost 127.0.0.1 ::1 生成证书对,最后按工具链要求配置 https 服务并确保访问 https://localhost:3000。

vscode怎么开启本地https服务器进行webrtc或者api接口调试

用 mkcert 快速生成可信本地 HTTPS 证书

VSCode 本身不提供 HTTPS 服务器功能,真正要解决的是「如何让本地起的 Web 服务(比如 python -m http.server、npm run dev、webpack-dev-server)跑在 https://localhost:3000 上」。WebRTC 的 getUserMedia 和现代浏览器的 API(如 navigator.geolocation)强制要求安全上下文,HTTP localhost 已不被信任(Chrome 117+ 起彻底禁用)。

最轻量且跨平台的方案是用 mkcert 生成本地 CA 签发的证书,系统/浏览器会信任它:

  • 先装 mkcert:choco install mkcert(Windows)、brew install mkcert nss(macOS)、或从 GitHub release 下载二进制
  • 运行 mkcert -install —— 这步把根证书注入系统和 Chrome/Firefox(Edge 需手动导入到“受信任的根证书颁发机构”)
  • 生成证书对:mkcert localhost 127.0.0.1 ::1,输出 localhost-key.pem 和 localhost.pem

给常见本地服务加 HTTPS(Node.js / Python / Vite)

证书有了,下一步是让开发服务器加载它。不同工具链配置位置和参数名差异大,容易配错端口、路径或忽略私钥权限问题:

VSCode
VSCode

避免常见的 VSCode 错误——设置冲突、调试器配置和扩展冲突。

下载
  • Vite:在 vite.config.ts 里加 server: { https: { key: fs.readFileSync('./localhost-key.pem'), cert: fs.readFileSync('./localhost.pem') } };注意路径是相对于项目根目录,不是 vite.config.ts 所在目录
  • Webpack Dev Server:启动命令加 --https --key ./localhost-key.pem --cert ./localhost.pem;别漏掉 --https,否则只读证书不生效
  • Python HTTP server:用 python -m http.server 3000 --bind localhost:3000 不支持 HTTPS;改用 https-server(npm install -g https-server),然后 https-server -p 3000 -c localhost.pem -k localhost-key.pem
  • Node.js 原生 https.createServer:确保 fs.readFileSync 路径正确,且私钥文件不能有密码(openssl rsa -in protected.key -out localhost-key.pem 解密)

Chrome / Edge 访问时仍报 NET::ERR_CERT_AUTHORITY_INVALID

这不是 VSCode 的问题,而是证书没被浏览器真正信任。常见原因有三个:

  • 执行了 mkcert -install,但没重启浏览器(尤其是 Edge,它复用 Windows 证书存储,有时需重启系统)
  • 证书是给 localhost 生成的,但你在地址栏输的是 http://127.0.0.1:3000 或 https://[::1]:3000 —— 必须用 https://localhost:3000,否则域名不匹配
  • Mac 上 Safari 用钥匙串访问,需手动把 rootCA.pem 拖进「系统」钥匙串,并双击设为「始终信任」;Chrome 会同步系统钥匙串,但有时延迟,可清空 chrome://settings/certificates 中的旧条目再重试

调试 WebRTC 时 HTTPS 不够,还缺 localhost 的特殊豁免

即使 HTTPS 跑起来了,RTCPeerConnection 在某些场景下仍可能报 Failed to execute 'createOffer' on 'RTCPeerConnection': Cannot create offer with no local tracks and no offerToReceive*——这和 HTTPS 无关,而是媒体设备权限未触发。关键点是:

  • 必须用 https://localhost:xxx,不能是 https://127.0.0.1:xxx,哪怕证书里包含了 127.0.0.1;Chrome 对 localhost 有硬编码豁免,允许调用 getUserMedia 而无需用户手动点击授权(仅限 localhost)
  • 如果用自定义域名(如 https://myapp.test),哪怕证书有效,也必须先在页面上由用户主动点击按钮触发 getUserMedia,否则静默失败
  • 检查 navigator.mediaDevices 是否为 undefined:只有在安全上下文(HTTPS + localhost)下才存在;如果不存在,说明 HTTPS 没生效或用了错误域名

证书路径写错、浏览器没重启、地址栏敲错域名——这三个点卡住的人最多。其他都是顺带的事。

大量免费API接口:立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游,为数据API应用能力赋能!

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

vscode

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
chrome什么意思
chrome什么意思

chrome是浏览器的意思,由Google开发的网络浏览器,它在2008年首次发布,并迅速成为全球最受欢迎的浏览器之一。本专题为大家提供chrome相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.11

2706

5

chrome无法加载插件怎么办
chrome无法加载插件怎么办

chrome无法加载插件可以通过检查插件是否已正确安装、禁用和启用插件、清除插件缓存、更新浏览器和插件、检查网络连接和尝试在隐身模式下加载插件方法解决。更多关于chrome相关问题,详情请看本专题下面的文章。php中文网欢迎大家前来学习。

2023.11.06

5219

7

Chrome开启无痕模式
Chrome开启无痕模式

本专题整合了Chrome无痕模式开启相关内容,阅读专题下面的文章了解更多详细教程。

2026.03.24

3747

22

edge是什么浏览器
edge是什么浏览器

Edge是一款由Microsoft开发的网页浏览器,是Windows 10操作系统中默认的浏览器,其目标是提供更快、更安全、更现代化的浏览器体验。本专题为大家提供edge浏览器相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.21

2922

5

IE浏览器自动跳转EDGE如何恢复
IE浏览器自动跳转EDGE如何恢复

ie浏览器自动跳转edge的解决办法:1、更改默认浏览器设置;2、阻止edge浏览器的自动跳转;3、更改超链接的默认打开方式;4、禁用“快速网页查看器”;5、卸载edge浏览器;6、检查第三方插件或应用程序等等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2024.03.05

2594

4

如何解决Edge打开但没有标题的问题
如何解决Edge打开但没有标题的问题

若 Microsoft Edge 浏览器打开后无标题(窗口空白或标题栏缺失),可尝试以下方法解决: 重启 Edge:关闭所有窗口,重新启动浏览器。 重置窗口布局:右击任务栏 Edge 图标 → 选择「最大化」或「还原」。 禁用扩展:进入 edge://extensions 临时关闭插件测试。 重置浏览器设置:前往 edge://settings/reset 恢复默认配置。 更新或重装 Edge:检查最新版本,或通过控制面板修复

2025.04.24

3012

6

硬盘接口类型介绍
硬盘接口类型介绍

硬盘接口类型有IDE、SATA、SCSI、Fibre Channel、USB、eSATA、mSATA、PCIe等等。详细介绍:1、IDE接口是一种并行接口,主要用于连接硬盘和光驱等设备,它主要有两种类型:ATA和ATAPI,IDE接口已经逐渐被SATA接口;2、SATA接口是一种串行接口,相较于IDE接口,它具有更高的传输速度、更低的功耗和更小的体积;3、SCSI接口等等。

2023.10.19

3148

3

PHP接口编写教程
PHP接口编写教程

本专题整合了PHP接口编写教程,阅读专题下面的文章了解更多详细内容。

2025.10.17

4849

12

php8.4实现接口限流的教程
php8.4实现接口限流的教程

PHP8.4本身不内置限流功能,需借助Redis(令牌桶)或Swoole(漏桶)实现;文件锁因I/O瓶颈、无跨机共享、秒级精度等缺陷不适用高并发场景。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2025.12.29

3769

9

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程