React Native + Expo Android应用调用Flask API时fetch抛出Network request failed错误求助

我之前帮好几个开发者排查过类似的问题——Postman能正常请求Flask API，但React Native Android端就是报Network request failed，结合你的情况，大概率是下面几个原因，咱们逐个解决：

1. Android 9+ 禁止明文HTTP请求 #

Android Pie（API 28）及以上版本默认不允许明文的HTTP请求，而你的Flask服务用的是http://开头的地址，这会被系统拦截。

解决步骤：

• 打开你的React Native项目里的android/app/src/main/AndroidManifest.xml文件
• 在<application>标签里添加android:usesCleartextTraffic="true"，同时确认已经有网络权限：

  <uses-permission android:name="android.permission.INTERNET" />
  <application
    ...
    android:usesCleartextTraffic="true">
    ...
  </application>
  

2. 调试模式下的代理或端口转发问题 #

如果你的Flask服务运行在本地电脑，React Native调试时可能因为端口转发没设置，导致APP无法访问电脑的IP。

解决办法：

• 执行adb端口转发命令，把手机的5000端口转发到电脑的5000端口：

  adb reverse tcp:5000 tcp:5000
  

  之后你可以把请求地址改成http://localhost:5000/driver/register试试，这样更稳定。
• 如果开启了React Native Debugger，确保没有错误的代理设置，可以尝试关闭调试模式直接运行APP，看请求是否正常。

3. 请求头缺少Content-Type导致服务器解析失败 #

你的fetch请求里没有设置Content-Type: application/json，虽然Postman会自动添加这个头，但React Native的fetch不会，Flask服务器可能无法正确解析你发送的JSON Body，这也可能导致请求失败（虽然错误提示是Network failed，但有时候服务器的异常响应会被客户端当成网络错误）。

修改你的代码：

function apiRequest(path, method, body = "") {
  const url = path;
  console.log("going");
  console.log(url);
  return fetch(url, { // 这里要return Promise，不然拿不到返回值
    method: method,
    headers: {
      "Cache-control": "no-cache",
      "Content-Type": "application/json" // 新增这个头
    },
    body: body,
  })
  .then((response) => {
    if (response.ok) {
      if (response.status == 204) {
        return true;
      }
      return response.json();
    }
    throw new Error(`${response.status}: ${response.body}`);
  })
  .then((json) => {
    console.log(json);
    return json;
  })
  .catch((error) => {
    console.log("ERRORED:");
    console.error(error);
    throw error; // 抛出错误让调用者处理
  });
}

// 调用时要用async/await或者.then
async function sendRequest() {
  try {
    var response = await apiRequest(
      "http://192.168.2.244:5000/driver/register",
      "POST",
      JSON.stringify({
        name: name,
        email: email,
        password: password,
      })
    );
    console.log(`RES: ${response}`);
  } catch (err) {
    console.error("Request failed:", err);
  }
}

sendRequest();

4. 确认电脑和手机在同一局域网 #

虽然你说地址正确，但还是再确认一下：你的手机和运行Flask的电脑必须连接同一个WiFi，并且电脑的防火墙没有拦截5000端口的入站请求。

先试试上面这几个方案，应该能解决你的问题！

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