如何解决VSCode的Live Server插件打开网页是127.0.0.1拒接访问

夏晨小哥_3114

夏晨小哥_3114

2026-03-27

829人浏览

原创

live server 默认绑定 127.0.0.1 导致外部设备无法访问,需改为 0.0.0.0 并检查端口、防火墙、工作区根目录及 hsts 缓存问题。

如何解决vscode的live server插件打开网页是127.0.0.1拒接访问

Live Server 默认绑定 127.0.0.1,外部设备打不开

VSCode 的 Live Server 插件默认只监听本地回环地址 127.0.0.1,所以你在手机、平板或另一台电脑上用 IP 访问(比如 http://192.168.x.x:5500)时,会直接被拒——不是网络问题,是服务压根没在那个网卡上监听。

解决办法是让插件改用 0.0.0.0 绑定,开放给本机所有网络接口:

  • 打开 VSCode 设置(Ctrl+, 或 Cmd+,),搜 live server config
  • 找到 Live Server > Settings: Host,把值从默认的 127.0.0.1 改成 0.0.0.0
  • 顺手检查 Live Server > Settings: Port 是否被占用(比如被 Python 的 http.server 占了 5500),可改成 5501 等空闲端口
  • 重启 Live Server(点右下角「Go Live」按钮两次,或先停再启)

防火墙或路由器阻止了局域网访问

即使绑定了 0.0.0.0,Windows/macOS 防火墙也可能拦截入站连接,尤其是非 localhost 的请求。Mac 用户还要注意「共享」里的「互联网共享」是否意外开启,它会干扰本地网络路由。

快速验证和处理:

  • 在同局域网的另一台设备浏览器里访问 http://你的电脑IP:端口(如 http://192.168.1.10:5500),如果显示「拒绝连接」而非「无法访问此网站」,大概率是防火墙挡了
  • Windows:进「Windows 安全中心 > 防火墙和网络保护 > 允许应用通过防火墙」,找到 Code.exe,勾选「专用」和「公用」
  • macOS:系统设置 > 网络 > 防火墙 > 防火墙选项,确保没启用「阻止所有传入连接」;也可临时关闭防火墙测试
  • 路由器一般不用动,除非你开了 AP 隔离(常见于公共 Wi-Fi 或某些企业路由器),此时设备间根本不能互访

VSCode 工作区根目录不对,导致路径 404

Live Server 启动的是当前打开文件所在**文件夹的根路径**,不是整个项目最外层。比如你打开了 src/index.html,但没把 src 文件夹设为 VSCode 工作区根目录,那它实际监听的是上层目录,index.html 就不在服务根下,访问时会 404。

VSCode
VSCode

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

下载

确认并修正:

  • 看 VSCode 左下角状态栏,显示的是哪个文件夹路径?那是 Live Server 的根
  • 如果不对,用「文件 > 将文件夹添加到工作区」,选对包含 index.html 的那一层目录
  • 或者直接右键 index.html → 「Open with Live Server」,它会以该文件所在目录为根启动(比点击右下角按钮更可靠)
  • 别依赖「Go Live」按钮自动推断——它只认当前工作区根,不认当前活动文件位置

HTTPS / HSTS 导致跳转失败或白屏

如果你之前用过 HTTPS 服务(比如 Vite、Webpack Dev Server 开过 https: true),浏览器可能对这个域名(localhost 或你的局域网 IP)缓存了 HSTS 策略,强制跳 HTTPS。而 Live Server 只支持 HTTP,结果就是空白页、重定向循环或 ERR_SSL_PROTOCOL_ERROR。

临时绕过方法(仅调试用):

  • Chrome 地址栏输入 chrome://net-internals/#hsts → 在「Delete domain security policies」里输入你的局域网 IP(如 192.168.1.10)→ Delete
  • 或者换一个没访问过的端口(比如从 :5500 换成 :5502),避免策略命中
  • 终极保险:用无痕窗口访问,HSTS 不生效

这事容易被忽略,尤其当你刚从其他开发服务器切过来,页面明明跑起来了却一片空白,八成是它。

相关文章

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

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

下载

相关标签:

vscode

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

相关专题

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

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

2023.08.11

2726

5

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

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

2023.11.06

5339

7

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

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

2026.03.24

3827

22

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

硬盘接口类型有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

4909

12

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

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

2025.12.29

3789

9

java接口相关教程
java接口相关教程

本专题整合了java接口相关内容,阅读专题下面的文章了解更多详细内容。

2026.01.19

446

15

数据库Delete用法
数据库Delete用法

数据库Delete用法:1、删除单条记录;2、删除多条记录;3、删除所有记录;4、删除特定条件的记录。更多关于数据库Delete的内容,大家可以访问下面的文章。

2023.11.13

3031

4

drop和delete的区别
drop和delete的区别

drop和delete的区别:1、功能与用途;2、操作对象;3、可逆性;4、空间释放;5、执行速度与效率;6、与其他命令的交互;7、影响的持久性;8、语法和执行;9、触发器与约束;10、事务处理。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2023.12.29

925

3

热门下载

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

精品课程

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