React Native使用axios调用Node.js接口出现Network Error问题求助

问题原因&解决办法 #

1. Axios响应字段访问错误 #

Axios 发起请求成功后返回的响应对象有固定结构，所有后端返回的业务数据统一存储在response.data属性下，response根对象本身不存在默认的message属性，如果你后端接口返回的结构包含message字段，正确的取值写法是response.data.message，直接访问response.message必然会得到undefined。

2. 检查后端服务的可访问性 #

React Native运行在模拟器/真机端时，不能直接用localhost访问本地启动的Node.js+Express后端：

• 安卓模拟器访问本地后端需要替换IP为10.0.2.2
• iOS模拟器访问本地后端可以用localhost
• 真机测试需要保证手机和后端电脑在同一局域网下，使用后端电脑的局域网IP作为接口地址

3. 补充错误日志排查 #

在Axios请求的catch回调中添加完整错误打印，确认具体报错类型：

axios.get('你的接口地址')
  .then(response => {
    console.log('返回数据：', response.data)
  })
  .catch(error => {
    // 打印完整错误信息，区分是请求失败还是后端返回错误
    console.log('报错详情：', error.response ? error.response.data : error.message)
  })

4. 确认后端接口返回格式 #

确认Express接口返回的是JSON结构，示例写法如下：

// Express 接口示例
app.get('/test', (req, res) => {
  res.json({
    message: '接口连通成功'
  })
})

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