React Native中Axios Post请求出现网络错误问题求助

常见原因及修复步骤 #

• 本地IP地址问题
  127.0.0.1是本地回环地址，React Native模拟器/真机无法通过该地址访问电脑上的Laravel服务。

  • 替换为电脑的局域网IP地址，例如 http://192.168.x.x:8000/api/users
  • 查看局域网IP方法：
    • Windows：命令行执行 ipconfig，找到对应网卡的IPv4地址
    • Mac/Linux：命令行执行 ifconfig 或 ip addr，获取局域网IP

• CORS跨域配置缺失
  Postman不会触发跨域检查，但React Native请求会受影响，需为Laravel配置CORS：

  • 安装laravel-cors扩展：

    composer require fruitcake/laravel-cors
    

  • 发布配置文件：

    php artisan vendor:publish --tag="cors"
    

  • 修改config/cors.php（开发环境可放开限制）：

    'paths' => ['api/*'],
    'allowed_methods' => ['*'],
    'allowed_origins' => ['*'],
    'allowed_headers' => ['*'],
    

  • 在app/Http/Kernel.php的$middlewareGroups['api']中添加：

    \Fruitcake\Cors\HandleCors::class,
    

• Laravel服务监听范围限制
  默认php artisan serve仅监听127.0.0.1，外部设备无法访问：

  • 启动服务时指定监听所有地址：

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

• 模拟器网络映射（仅Android）
  Android模拟器可通过端口映射直接使用127.0.0.1：

  adb reverse tcp:8000 tcp:8000
  

  之后请求地址可保留 http://127.0.0.1:8000/api/users

• Axios请求头补全
  确保请求携带正确的Content-Type：

  axios.post('http://你的IP:8000/api/users', Data, {
    headers: {
      'Content-Type': 'application/json',
    }
  })
  

• 防火墙/杀毒软件拦截
  检查电脑防火墙是否允许8000端口的入站连接，可临时关闭杀毒软件测试。

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