求助：React Native中Axios POST请求出现Network Error的解决方法

问题重现 #

在React Native实现用户注册时，Axios发送POST请求出现ERR_NETWORK错误，Postman中请求正常。代码如下：

var Data56 = {
  name: name,
  email: email,
  babyname: babyname,
  phone: nuber, // 注意此处变量名拼写错误：nuber → number
  // period: date2,
  baby_date: date,
};

console.log(Data56);

axios
  .post("http://10.0.2.2:8000/api/register", Data56, {
    headers: {
      "Content-Type": "application/x-www-form-urlencoded",
    },
  })
  .then((res) => {
    props.navigation.navigate("Home_scrren", { data: Data56 });
  })
  .catch((error) => {
    alert(error);
  });

报错信息：

C:\Users\vivek\sukprsavam\components\signupfor.jsx:122 {"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:103296: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://10.0.2.2/api/register","data":"{\"name\":\"vivek kn\",\"email\":\"vivekkn91@gmail.com\",\"phone\":\"7558973998\",\"baby_date\":\"27/12/2022\"}"},"code":"ERR_NETWORK","status":null}

问题分析 #

从报错信息的config字段可以看到，实际请求的Content-Type是application/json，但代码中设置的是application/x-www-form-urlencoded。这是因为Axios默认会将JavaScript对象序列化为JSON格式，并自动覆盖Content-Type头。而Postman中你可能使用了表单格式请求，服务器仅接受表单类型数据，导致请求不兼容；另外网络可达性、CORS配置也可能是诱因。

解决步骤 #

1. 正确序列化表单数据 #

使用qs库将对象转换为x-www-form-urlencoded格式：

• 安装依赖：

  npm install qs
  # 或
  yarn add qs
  

• 修改代码：

  import qs from 'qs';
  
  // ...
  
  axios
    .post("http://10.0.2.2:8000/api/register", qs.stringify(Data56), {
      headers: {
        "Content-Type": "application/x-www-form-urlencoded",
      },
    })
    .then((res) => {
      props.navigation.navigate("Home_scrren", { data: Data56 });
    })
    .catch((error) => {
      // 更详细的错误打印，方便排查
      console.error('请求错误详情:', error.response || error);
      alert(error.message || '请求失败');
    });
  

2. 修正变量拼写错误 #

代码中phone: nuber存在拼写错误，改为phone: number，避免数据字段异常。

3. 验证网络可达性 #

• 对于Android模拟器，10.0.2.2是本地主机的映射地址，确认电脑的8000端口服务正在运行，且模拟器浏览器能访问http://10.0.2.2:8000/api/register（GET请求看是否有响应）。
• 如果是真机测试，替换10.0.2.2为电脑的局域网IP（如192.168.1.100），确保手机和电脑在同一网络下。

4. 配置服务器CORS #

React Native调试时属于跨域请求，服务器需允许对应来源访问：

• 以Laravel为例，修改config/cors.php中的allowed_origins为['*']（开发环境临时使用）：

  'allowed_origins' => ['*'],
  

• 其他后端框架需配置相应的CORS规则，允许http://localhost:8081（React Native调试地址）或所有源访问。

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