如何配置让其他设备可访问VS Code的Live Server并设置访问密码

第一步：配置Live Server允许局域网设备访问 #

默认Live Server仅绑定本地回环地址127.0.0.1，仅本机可访问，需要按以下步骤修改配置：

• 打开VS Code设置页面，快捷键为Ctrl+,（Windows/Linux）或Cmd+,（Mac）
• 搜索live server.settings.host，将默认值127.0.0.1修改为你本地设备的局域网IP（不知道本地IP的话，Windows可在CMD执行ipconfig，Mac/Linux可在终端执行ip addr查询）
• 搜索live server.settings.useLocalIp，勾选该选项，后续启动Live Server会自动生成带本地IP的访问链接

你也可以直接编辑settings.json文件，添加以下两行配置：

"liveServer.settings.host": "你的本地局域网IP",
"liveServer.settings.useLocalIp": true

这一步完成后，同局域网下的其他设备已经可以通过「本地IP:5500」（默认端口为5500，自行修改过端口的话用对应端口）直接访问Live Server服务

第二步：配置访问密码验证 #

Live Server本身没有内置身份验证功能，需要通过以下两种方案实现密码校验：

方案1：前端JS校验（最简实现，适合内部测试场景） #

直接在项目入口文件（通常是index.html）的最顶部插入以下JS代码，访问时会弹出密码输入框，校验失败将无法访问页面内容：

<script>
// 替换为你自定义的访问密码
const validPassword = "custom_password_123";
const inputPassword = prompt("请输入访问密码：");
if (inputPassword !== validPassword) {
  alert("密码错误，无权访问");
  window.location.href = "about:blank";
}
</script>

该方案为前端层面校验，足够满足普通家用、内部测试的安全需求，不建议用于承载敏感内容的公开服务

方案2：Nginx反向代理加HTTP Basic认证（安全性更高，适合正式场景） #

通过Nginx反向代理Live Server服务，在代理层实现标准的HTTP Basic认证，安全性更高：

• 本地安装Nginx，找到Nginx的核心配置文件nginx.conf
• 在配置文件的http块内新增如下server配置：

server {
  listen 8080;
  server_name 你的本地局域网IP;
  # 认证弹窗提示文案
  auth_basic "请输入访问密码";
  # 密码存储文件路径，后续步骤会生成该文件
  auth_basic_user_file /usr/local/nginx/conf/passwd;
  location / {
    # 代理到本地启动的Live Server地址
    proxy_pass http://127.0.0.1:5500;
    proxy_set_header Host $host;
  }
}

• 安装htpasswd工具，执行命令生成密码文件：htpasswd -c /usr/local/nginx/conf/passwd 自定义用户名，按提示输入需要设置的密码即可
• 重启Nginx使配置生效，后续其他设备访问「本地IP:8080」就会弹出账号密码输入框，校验通过才能访问Live Server内容

注意事项 #

• 上述配置仅适用于局域网场景，如需外网访问还需要额外配置内网穿透
• 如果设备开启了系统防火墙，需要将Live Server使用的端口（默认5500）或者Nginx使用的端口（示例中为8080）加入防火墙放行规则，否则其他设备会出现连接超时问题

内容的提问来源于stack exchange，提问作者khaled amir