如何借助WAMP让本地React JS应用可被局域网其他电脑访问？

结论 #

你完全不需要借助WAMP的Web服务功能就能实现跨设备访问，WAMP在你的技术栈中仅需负责保持MySQL服务正常运行即可，你的Node.js+Express技术栈本身就支持对外提供访问。

具体配置步骤 #

1. 调整后端Express服务监听规则 #

你的Express服务默认仅监听本地回环地址127.0.0.1，仅支持本地访问，修改监听地址为0.0.0.0即可接收所有网卡的访问请求，代码示例：

// 原写法
// app.listen(3000, () => console.log('服务启动在本地3000端口'))
// 修改后的写法
app.listen(3000, '0.0.0.0', () => console.log('服务已启动，支持所有网卡访问'))

修改完成后需要开放你本地电脑防火墙对应端口（示例中为3000，可自行修改为你实际使用的端口）的TCP入站规则。

2. 调整前端React的配置 #

• 前端代码中所有调用后端接口的地址，不要使用localhost:后端端口，替换为你本地电脑的局域网IP+后端端口，比如你本地局域网IP为192.168.3.15，后端端口为5000，就写为http://192.168.3.15:5000
• 如果你使用的是React开发服务而非打包后的静态文件，需要调整React开发服务的监听规则，以create-react-app为例：
  • Mac/Linux系统下启动命令改为HOST=0.0.0.0 npm start
  • Windows系统下可以安装cross-env后使用cross-env HOST=0.0.0.0 npm start，也可以直接修改package.json中的启动脚本配置

3. WAMP侧仅需配置MySQL权限（同设备部署无需修改） #

因为你仅使用WAMP的MySQL功能，且Node.js服务和MySQL部署在同一台设备上，不需要修改WAMP的任何配置，保持MySQL服务正常启动即可。如果后续你要把Node.js服务部署到其他设备，再修改MySQL的用户访问权限，允许对应IP的访问请求即可。

访问验证 #

配置完成后，在同一局域网下的其他设备浏览器中输入http://你本地的局域网IP:React服务端口即可正常访问应用。如果需要外网设备也能访问，直接对Node.js服务的端口做端口映射或者内网穿透即可，全程不需要用到WAMP的Apache服务功能。

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