同一局域网下NestJS+MySQL+React应用手机端无法获取数据库内容

核心排查与修复步骤 #

1. 验证React请求地址准确性

   • 打开手机浏览器开发者工具（推荐用Chrome远程调试连接手机），查看Network面板中React发起的后端请求地址是否为http://192.168.100.5:3000/clients。
   • 确认React代码中是否正确引用process.env.REACT_APP_BACKEND_URL，避免硬编码localhost或使用相对路径导致请求目标错误。

2. 修复CORS配置冲突
   浏览器规范禁止同时设置origin: '*'和credentials: true，会导致带凭证的跨域请求被拦截。修改NestJS的CORS配置为具体允许的源：

   app.enableCors({
     origin: ['http://192.168.100.5:3001', 'http://localhost:3001'], // 包含React的访问地址
     methods: 'GET, HEAD, PUT, PATCH, POST, DELETE, OPTIONS',
     credentials: true,
   });
   

   重启NestJS服务后重试。

3. 确保React环境变量生效

   • 确认.env文件放在React项目根目录，变量名严格为REACT_APP_BACKEND_URL（React仅识别前缀为REACT_APP_的环境变量）。
   • 修改.env后必须重启React开发服务器，否则新配置不会生效。

4. 查看请求错误详情
   检查浏览器控制台的Console面板，是否存在CORS错误、404错误或网络请求失败提示，根据具体错误进一步定位问题。

验证流程 #

修改配置后，先在手机浏览器直接访问http://192.168.100.5:3000/clients确认后端接口正常，再打开React应用检查数据加载情况。

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