Reactjs+Laravel API+Capacitor安卓设备POST请求连接失败问题

问题 #

在安卓设备上搭建Reactjs+Laravel API+Capacitor的API连接时，发起POST请求出现连接失败/网络错误。相关代码如下：

Home.jsx代码片段 #

try {
      // const response = await axios.post('http://127.0.0.1:8000/api/submitqrcode', { qr_code_data: data },
      //   getConfig()
      // );
      const response = await CapacitorHttp.post({
        url: 'http://127.0.0.1:8000/api/submitqrcode',
        headers: {"Content-Type": "application/json"},
        data: {qr_code_data: data},
      })

capacitor.config.json配置 #

{
  "appId": "com.example.app",
  "appName": "QR Code Reader",
  "webDir": "build",
  "plugins": {
    "CapacitorHttp": {
      "enabled": true
    }
  }
}

已尝试的方案及报错：

• 使用Axios，报错：

Error: net::ERR_CONNECTION_REFUSED

• 使用CapacitorHttp，报错：

Error: "ConnectException" message: "Failed to connect to /127.0.0.1:8000"

两种方式均无法成功连接API，请问问题原因是什么？该如何解决？

问题原因与解决方案 #

核心原因 #

127.0.0.1是本地回环地址，在安卓设备上访问这个地址会指向设备自身，而非运行Laravel API的电脑——这就是两种请求全被拒绝的根本原因，安卓设备找不到电脑上的API服务。

具体解决步骤 #

1. 确保设备同局域网
   让运行Laravel的电脑和测试安卓手机连接到同一个WiFi（禁用手机流量）。

2. 获取电脑局域网IP

   • Windows：打开命令提示符，输入ipconfig，找到无线局域网适配器下的IPv4地址（例：192.168.1.100）。
   • Mac/Linux：打开终端，输入ifconfig或ip addr，找到WiFi对应的inet地址。

3. 修改API请求地址
   把代码中的http://127.0.0.1:8000替换为电脑局域网IP+端口，示例：

   const response = await CapacitorHttp.post({
     url: 'http://192.168.1.100:8000/api/submitqrcode',
     headers: {"Content-Type": "application/json"},
     data: {qr_code_data: data},
   })
   

4. 配置Laravel允许外部访问

   • 修改.env文件：APP_URL=http://[你的局域网IP]:8000。
   • 启动Laravel时用命令：php artisan serve --host=0.0.0.0 --port=8000，让API监听所有网络接口。
   • 若启用CORS，在config/cors.php中设置allowed_origins为['*']（仅开发环境用，生产环境需指定具体域名）。

5. 检查安卓网络权限
   确保AndroidManifest.xml中添加了必要权限：

   <uses-permission android:name="android.permission.INTERNET" />
   <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
   

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