React无法从本地Laravel API获取数据（局域网访问问题）

核心原因分析 #

你遇到的问题本质是局域网设备访问时，API请求的目标地址无法正确指向运行Laravel的服务器，同时可能伴随服务绑定限制或跨域拦截问题。以下是具体排查和解决步骤：

1. 修正React项目中的API请求地址 #

如果React代码里硬编码了API地址为http://127.0.0.1:8000，手机访问时这个地址会指向手机自身，而非运行Laravel的电脑。

• 解决方法：
  • 直接将API基础地址改为运行Laravel的电脑的局域网IP（比如你的电脑局域网IP是192.168.0.104），即http://192.168.0.104:8000
  • 推荐用环境变量管理：在React项目根目录创建.env文件，添加REACT_APP_API_URL=http://192.168.0.104:8000，代码中通过process.env.REACT_APP_API_URL拼接请求地址

2. 让Laravel服务对外开放 #

默认php artisan serve只会绑定127.0.0.1，仅本机可访问，局域网其他设备无法连接。

• 解决方法：
  启动Laravel时指定绑定所有网卡：

  php artisan serve --host=0.0.0.0 --port=8000
  

  这样局域网内设备就能通过http://你的电脑局域网IP:8000访问API了

3. 配置Laravel的CORS跨域规则 #

手机访问React应用时，请求API属于跨域请求（IP不同），Laravel默认会拦截这类请求。

• 解决方法：
  编辑config/cors.php文件：
  • 将allowed_origins改为包含React应用的局域网地址：

    'allowed_origins' => ['http://192.168.0.104:3000'],
    

  • 开发环境可临时设置为['*']允许所有来源（生产环境禁止这么做）
  • 确保app/Http/Kernel.php的api中间件组包含\Illuminate\Http\Middleware\HandleCors::class

4. 检查电脑防火墙设置 #

电脑防火墙可能拦截了局域网设备对8000端口的访问请求。

• 解决方法：
  • Windows：打开「Windows Defender防火墙」→「高级设置」→添加入站规则，允许8000端口的TCP连接
  • Mac：打开「系统设置」→「网络」→「防火墙」→「选项」，允许Laravel相关服务（或临时关闭防火墙测试）

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