本地运行的React应用无法加载数据（非CORS问题排查）

问题概述 #

• 环境：
  • React前端（端口3000）运行在Mac本地；
  • Express后端（端口5000）本地连接MongoDB，配置了CORS允许指定来源。
• 现象：
  • 本地Chrome浏览器访问前端正常，能通过axios调用API获取数据、发送POST请求；
  • 移动设备通过同一网络的http://10.0.0.227:3000访问前端时，页面显示正常，但无法加载后端数据、发送POST请求，无任何报错提示；
  • 移动设备直接访问后端接口http://10.0.0.227:5000/api/data能正常获取JSON数据。

原因分析 #

1. .env配置存在无效空格：你的.env文件中REACT_APP_SERVER_URL= http://10.0.0.227:5000的等号后多了一个空格，导致前端拼接API地址时生成了带前置空格的无效URL（ http://10.0.0.227:5000/api/data），浏览器无法识别这个地址，请求自然失败。
2. 前端错误日志无法查看：移动设备浏览器默认不会显示console日志，你看不到拼接后的错误URL和catch块里的错误信息，所以误以为没有任何报错。
3. 后端CORS配置的容错设置：你注释了CORS配置中的错误回调代码，即使存在CORS问题也不会返回明确错误，但本次问题的核心并非CORS。

解决方法 #

1. 修正.env配置：去掉等号后的空格，确保配置项格式正确：

REACT_APP_SERVER_URL=http://10.0.0.227:5000

2. 重启React开发服务器：.env文件修改后必须重启服务器才能生效。
3. 开启移动设备调试工具：通过Chrome远程调试（将手机连接电脑，在Chrome中打开chrome://inspect）查看前端console日志，方便后续排查类似问题。
4. 优化后端CORS配置（可选）：取消注释错误回调代码，遇到CORS问题时返回明确错误，便于排查：

callback(new Error("Not allowed by CORS")); // Deny the request

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