ReactJS+NodeJS(Express)：API调用发起方及跨设备登录网络问题咨询

一、API调用的实际发起方 #

当你在登录页点击登录按钮时，是浏览器（运行在浏览器中的React前端代码）直接发起API请求到后端，而非前端服务器（React开发服务器，即localhost:3001）。

React是单页应用，前端代码打包后是静态资源，由开发服务器（或生产环境的静态资源服务器）下发到浏览器后，所有的交互逻辑（包括Axios发起请求）都在浏览器端执行。前端服务器仅负责提供静态文件，不会代理或发起API请求（除非你主动配置了代理，但默认情况下没有）。

二、手机访问时Axios网络错误的原因及解决办法 #

核心原因 #

你前端配置的后端API地址大概率是localhost:3000，当用手机访问前端时，浏览器会把localhost解析为手机自身的本地地址，而非运行后端服务的PC地址，导致请求无法到达后端。此外还有两个可能的辅助原因：

• PC防火墙拦截了3000端口的入站请求
• 后端服务仅监听127.0.0.1（仅本地可访问），未开放到局域网

解决步骤 #

1. 修改前端API的BaseURL
   将Axios的基础请求地址从localhost:3000改为PC的局域网IP（比如http://192.168.1.xx:3000，这里的192.168.1.xx就是你手机访问前端时用的PC IP）。
   开发环境建议用环境变量配置，比如在React项目根目录创建.env文件：

   REACT_APP_API_BASE_URL=http://192.168.1.xx:3000
   

   然后Axios初始化时引用该变量：

   import axios from 'axios';
   const api = axios.create({
     baseURL: process.env.REACT_APP_API_BASE_URL
   });
   

2. 确保后端服务监听局域网地址
   在Express的app.listen方法中指定监听0.0.0.0，这样局域网内的设备才能访问：

   app.listen(3000, '0.0.0.0', () => {
     console.log('后端服务运行在 http://0.0.0.0:3000');
   });
   

3. 检查PC防火墙设置
   临时关闭PC防火墙测试是否能正常请求，如果可以，就添加一条允许3000端口入站的规则，避免每次开发都关闭防火墙。

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