React Native中Axios POST请求出现网络错误，请求排查帮助

我在React Native里用Axios发送POST请求，Postman中能正常运行，但App里无法工作，请求帮助。

我的代码：

var Data = {
  name: name,
  email: email,
};
}
axios
  .post('http://10.0.2.2:8000/api/register', Data)
  .then(res => {
    alert(res);
  })
  .catch(err => console.log(JSON.stringify(err)));
}

报错信息：

{"message":"Network Error","name":"AxiosError","stack":"AxiosError: Network Error\n at XMLHttpRequest.handleError (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.sukprsavam&modulesOnly=false&runModule=true:103294:16)","config":{"transitional":{"silentJSONParsing":true,"forcedJSONParsing":true,"clarifyTimeoutError":false},"adapter":["xhr","http"],"transformRequest":[null],"transformResponse":[null],"timeout":0,"xsrfCookieName":"XSRF-TOKEN","xsrfHeaderName":"X-XSRF-TOKEN","maxContentLength":-1,"maxBodyLength":-1,"env":{},"headers":{"Accept":"application/json, text/plain, /","Content-Type":"application/json"},"method":"post","url":"http://103.161.55.43/api/register/","data":"{"name":"dadkn","email":"sdfgsf@gmail.com","baby_date":"27/12/2022"}"},"code":"ERR_NETWORK","status":null}

排查及解决办法 #

1. 统一请求地址 #

报错里的请求URL是http://103.161.55.43/api/register/，但代码里写的是http://10.0.2.2:8000/api/register，两个地址不一致。先确认目标接口的正确地址，将代码中的URL修改为一致的地址：

• 本地测试用模拟器时，10.0.2.2是Android模拟器指向本机的映射IP，需确保本机后端服务在8000端口正常运行；
• 若使用公网接口，直接替换为http://103.161.55.43/api/register/。

2. 配置网络权限 #

• Android：在android/app/src/main/AndroidManifest.xml中添加网络权限：

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

• iOS：若请求的是HTTP（非HTTPS）地址，需在ios/项目名/Info.plist中添加ATS配置，允许不安全连接：

  <key>NSAppTransportSecurity</key>
  <dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
  </dict>
  

3. 确认网络连通性 #

• 模拟器测试：检查本机后端服务是否正常启动，端口8000是否被占用，可通过浏览器访问http://localhost:8000/api/register验证；
• 真机测试：确保手机与后端服务处于同一局域网，或后端服务已开放公网访问权限，同时检查防火墙/安全组是否开放了目标端口。

4. 校验请求数据格式 #

报错信息中的请求数据包含baby_date字段，但你提供的代码里Data对象只有name和email，需确保请求字段与后端接口要求完全匹配。可补充完整字段后重试：

var Data = {
  name: name,
  email: email,
  baby_date: baby_date // 补充缺失字段
};

5. 后端配置CORS #

Postman不受跨域限制，但App请求公网接口时，后端需配置CORS允许你的App访问。比如：

• Django项目安装django-cors-headers并配置允许所有来源；
• Express项目使用cors中间件，设置允许跨域请求。

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