React项目通过VS Code的Go Live启动后，Brave浏览器无法正常访问问题

调整Live Server的根目录配置 #

React项目的静态资源入口是public目录，直接以项目根目录启动Live Server会导致资源加载或路由异常。你可以在VS Code的.vscode/settings.json中手动指定根目录：

{
  "liveServer.settings.root": "/public"
}

修改后关闭Live Server再重新启动，确保配置生效。

解除Brave浏览器的防护限制 #

• 关闭当前站点的Shields：点击地址栏右侧的Shields图标，选择"Disable for this site"。Brave的隐私防护可能会拦截Live Server的WebSocket热更新连接。
• 临时允许第三方Cookie：在Brave设置中，为当前站点开启第三方Cookie权限，避免WebSocket请求被拦截。
• 用无痕窗口测试：如果无痕窗口能正常运行，说明是浏览器扩展或缓存问题，逐一禁用扩展排查。

检查Live Server的运行日志 #

打开VS Code的输出面板（快捷键Ctrl+Shift+U），切换到"Live Server"标签页，查看是否有端口占用、资源加载失败等报错。如果端口被占用，在Live Server设置里修改liveServer.settings.port为其他值（比如5501）。同时打开浏览器控制台（F12），检查网络请求是否有404或500错误。

确认React项目的运行方式 #

Live Server主打静态页面热加载，而React项目更适合用官方的npm start启动开发服务器（自带完整的热更新功能）。如果一定要用Live Server，先执行npm run build构建项目，再将Live Server的根目录设置为/build：

{
  "liveServer.settings.root": "/build"
}

未构建的React项目直接用Live Server打开会因为JSX未编译而报错。

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