React Native连接MySQL数据库时出现AxiosError: Network Error求助

核心原因 #

你遇到的AxiosError: Network Error本质是React Native设备/模拟器无法正确访问电脑上的后端服务。因为在React Native环境中，localhost指向的是设备自身，而非运行后端的电脑主机，所以直接用http://localhost:5000会导致连接失败。

具体修正方案 #

1. 替换BASE_URL为正确的地址

根据你的测试环境选择对应地址：

• iOS模拟器：可以尝试http://127.0.0.1:5000，或者电脑的局域网IP（如http://192.168.x.x:5000）
• Android模拟器：使用http://10.0.2.2:5000（Android模拟器默认映射主机的回环地址），或电脑局域网IP
• 真机测试：必须使用电脑的局域网IP，且手机和电脑处于同一Wi-Fi网络

修改后的auth.js示例：

import axios from 'axios';

// 替换为你的电脑局域网IP或对应模拟器地址
const BASE_URL = 'http://192.168.1.100:5000'; 

const signUp = async (email, password, fullName) => {
  try {
    const response = await axios.post(`${BASE_URL}/signup`, { email, password, fullName });
    console.log(response.data);
  } catch (error) {
    console.error(error);
  }
};

const login = async (email, password) => {
  try {
    const response = await axios.post(`${BASE_URL}/login`, { email, password });
    const token = response.data.token;
    console.log(token);
  } catch (error) {
    console.error(error);
  }
};

export { signUp, login };

2. 验证后端服务可用性

• 先在电脑浏览器/Postman中测试http://localhost:5000/signup（发送POST请求，携带email、password、fullName参数），确认后端正常响应
• 在手机浏览器中访问电脑局域网IP+端口（如http://192.168.1.100:5000），若能返回接口相关信息（如"Method Not Allowed"），说明网络连通性正常

3. 其他排查点

• 关闭电脑防火墙，确认5000端口未被拦截
• 后端CORS配置已正确添加app.use(cors())，开发环境可临时改为app.use(cors({ origin: '*' }))（生产环境需限制来源）
• 检查请求参数格式是否与后端接口要求一致

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