React-Native+Axios安卓模拟器网络错误：请求成功但前端未感知

我之前遇到过几乎一模一样的场景——Android模拟器里Axios报Network Error，但后端已经执行完操作（比如发送邮件），iOS和Postman完全正常。结合你的代码和场景，给你几个针对性的解决方案：

1. 先解决Android明文HTTP访问限制 #

Android 9及以上默认禁止明文HTTP请求，这是最容易被忽略的点。在你的Expo项目app.json里添加配置：

{
  "expo": {
    "android": {
      "usesCleartextTraffic": true
    }
  }
}

这个配置允许应用访问非HTTPS的API，虽然你已经把地址改成了10.0.2.2，但如果没开这个，Android会悄悄拦截请求，导致Axios抛出Network Error。

2. 调整Axios超时时间 #

发送邮件是耗时操作，Axios默认10秒的超时可能不够——Android的OkHttp底层会在超时后直接判定请求失败，哪怕后端已经完成了邮件发送。修改你的Axios实例配置：

const axiosInstance = axios.create({
  baseURL: 'http://10.0.2.2:8000/api',
  timeout: 30000, // 改成30秒，根据你实际邮件发送耗时调整
  headers: { 'Content-Type': 'application/json' }
});

3. 修复Hapi的CORS配置 #

iOS对CORS的限制更宽松，但Android会严格校验响应头。确保你的Hapi服务器正确配置了CORS：

const server = Hapi.server({
  port: 8000,
  host: '0.0.0.0', // 不要只绑localhost，确保能被模拟器访问
  routes: {
    cors: {
      origin: ['*'], // 开发环境用*，生产环境替换成你的Expo域名
      headers: ['Accept', 'Content-Type', 'Authorization'],
      credentials: true
    }
  }
});

另外，检查sendEmail路由是否覆盖了全局CORS配置，如果有自定义路由配置，确保它也开启了CORS。

4. 捕获更详细的错误信息 #

Axios的Network Error是个很模糊的封装，你可以在catch里打印完整错误对象来定位问题：

export function sendEmail(mail) {
  return axiosInstance
    .post(`/sendEmail`, null, { params: { mail }, })
    .then(response => response)
    .catch(error => {
      console.log('完整错误:', error);
      console.log('响应详情:', error.response);
      console.log('请求详情:', error.request);
      // 临时 workaround：如果确认后端已执行成功，可以手动返回模拟响应
      if (error.message === 'Network Error') {
        return Promise.resolve({ status: 200, data: { message: "Email sent." } });
      }
      return Promise.reject(error);
    });
}

通过打印error.request，你可以看到请求是否真的发出去了，以及响应的状态码（如果有的话）。

5. 检查后端响应编码 #

有时候后端返回的响应包含非UTF-8字符，Android的OkHttp解析时会出错。在Hapi的响应里强制指定编码：

if (isMailSend) {
  return handler
    .response({ data: { message: "Email sent." } })
    .code(200)
    .type('application/json; charset=utf-8');
}

为什么iOS正常而Android出问题？ #

核心原因是两者的网络栈差异：

• iOS的NSURLSession对CORS、超时的限制更宽松，哪怕响应头有小问题也能正常解析。
• Android用的OkHttp严格遵循HTTP规范，对明文请求、超时、CORS头的校验更严格，稍微不符合就会抛出Network Error。

按上面的步骤排查，应该能解决你的问题。

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