VSCode启动的浏览器无法加载react-scripts start启动的React应用

问题场景 #

在WSL2中运行React（TypeScript）应用，通过npm start执行PORT=4200 BROWSER=none react-scripts start启动，Windows端浏览器手动访问localhost:4200正常，但通过VSCode的F5调试启动浏览器时，GET /返回HTTP 200却无响应体，页面持续空白，Edge/Chrome均复现该问题。当前launch配置如下：

{
    "type": "chrome",
    "request": "launch",
    "name": "Launch against localhost",
    "url": "http://localhost:4200",
    "webRoot": "${workspaceFolder}",
}

解决方案 #

1. 替换localhost为WSL2实际IP #

WSL2的localhost端口转发偶尔会出现异常，直接使用WSL2的内网IP访问：

• 在WSL终端执行hostname -I获取当前WSL2的IP地址
• 修改launch.json中的url字段为http://[WSL_IP]:4200（替换[WSL_IP]为实际输出的IP）

2. 修改React开发服务器绑定地址 #

让开发服务器绑定到所有网络接口，避免仅局限于WSL内部的localhost：

• 修改package.json中的start命令为：

  HOST=0.0.0.0 PORT=4200 BROWSER=none react-scripts start
  

• 重启npm start，此时终端会输出On Your Network: http://[WSL_IP]:4200，验证服务器已对外暴露

3. 调整VSCode调试器的浏览器启动参数 #

调试模式下的浏览器可能启用了安全隔离或缓存限制，添加参数禁用相关限制：

• 在launch.json中增加runtimeArgs配置：

  {
      "type": "chrome",
      "request": "launch",
      "name": "Launch against localhost",
      "url": "http://localhost:4200",
      "webRoot": "${workspaceFolder}",
      "runtimeArgs": [
          "--disable-web-security",
          "--disable-features=IsolateOrigins,site-per-process",
          "--ignore-certificate-errors"
      ]
  }
  

4. 手动配置Windows端口转发 #

如果WSL2的自动端口转发失效，手动添加端口映射：

• 在Windows命令提示符（管理员权限）执行：

  netsh interface portproxy add v4tov4 listenport=4200 listenaddress=0.0.0.0 connectport=4200 connectaddress=[WSL_IP]
  

• 执行wsl --shutdown重启WSL2，再重新启动应用和调试

5. 验证服务器运行状态 #

确保React开发服务器正常编译：

• 启动npm start后，确认终端输出Compiled successfully!，且同时显示Local和On Your Network的访问地址
• 若仅显示Local: http://localhost:4200，说明未绑定到0.0.0.0，需按步骤2修改启动命令

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