React开发环境无法被同网络机器访问的配置排查求助

嘿，这个问题我熟！你遇到的情况几乎都是因为webpack-dev-server默认只绑定了localhost（127.0.0.1），不会响应内网其他IP的请求。咱们来一步步解决：

1. 修改package.json中的启动命令 #

看你package.json里的start:dev脚本，现在是：

"start:dev": "webpack-dev-server --config webpack.config.dev.js --port 3000"

只需要添加--host 0.0.0.0参数，让服务器监听所有可用的网络接口（包括你的内网IP 10.0.1.3）。修改后变成：

"start:dev": "webpack-dev-server --config webpack.config.dev.js --port 3000 --host 0.0.0.0"

2. （可选）直接在webpack配置文件中设置 #

如果你更习惯在webpack配置里统一管理，打开webpack.config.dev.js，找到devServer配置项（没有的话就新增），添加host字段：

module.exports = {
  // 其他现有配置...
  devServer: {
    host: '0.0.0.0', // 关键配置
    port: 3000,
    // 你的其他devServer设置，比如hot、open等
  }
}

这两种方式二选一就行，效果是一样的。

3. 检查防火墙是否拦截端口 #

改完配置重启服务后如果还是访问不了，就得检查你设备的防火墙：

• Windows：打开「Windows Defender防火墙」，确保允许3000端口的入站请求，或者直接允许webpack-dev-server的网络访问权限。
• Mac：打开「系统设置」→「网络」→「防火墙」，检查是否阻止了该端口的连接。

4. 验证生效 #

重启你的开发服务后，自己本地依然可以用localhost:3000访问，同网络的其他机器输入http://10.0.1.3:3000就能正常打开你的React应用啦！

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