React Native向MySQL插入数据时出现"network request failed"错误排查

我来帮你排查这个问题，结合你给出的代码和环境信息，大概率是几个常见的配置或请求设置问题，咱们一步步来梳理：

1. 先修正最容易踩坑的协议问题 #

你代码里的fetch用了https://MySystemsIPAddress/submit_user_info.php，但MAMP默认启动的是HTTP服务，不是HTTPS。iOS模拟器会严格拦截HTTPS请求到非HTTPS服务器，直接导致网络请求失败。

解决方案：把URL改成HTTP协议，比如：

fetch('http://192.168.x.x/submit_user_info.php', { // 替换成你的实际本机IP
  // ... 其他参数不变
})

2. 确认本机IP与MAMP端口配置 #

• 找对正确的本机IP：打开终端输入ifconfig（Mac）或ipconfig（Windows），找到Wi-Fi对应的IP地址（比如192.168.1.105），不要用localhost——模拟器是独立的虚拟设备，它的localhost指向自己，不是你的电脑。
• 检查MAMP端口：如果MAMP的Apache端口不是默认的80（比如改成了8888），URL里必须加上端口号：

  fetch('http://192.168.x.x:8888/submit_user_info.php', { ... })
  

• 允许外部访问：打开MAMP偏好设置→「端口」，确保Apache服务正常运行，并且没有防火墙拦截这个端口。

3. 解决CORS跨域拦截问题 #

即使是同局域网，模拟器的请求也可能被React Native的网络层视为跨域请求，需要在PHP里添加CORS响应头。

修改submit_user_info.php，在最顶部加入：

header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: POST");
header("Access-Control-Allow-Headers: Accept, Content-Type");

4. 修复MySQL连接配置 #

你的DBConfig.php里$HostUser和$HostPass为空，但MAMP默认的MySQL用户名是root，密码也是root——phpMyAdmin的空配置是因为它用socket连接，而PHP的mysqli_connect需要明确的账号密码。

修改DBConfig.php：

<?php
$HostName = "localhost";
$DatabaseName = "UserInfo";
$HostUser = "root"; // MAMP默认用户名
$HostPass = "root"; // MAMP默认密码
?>

5. 排查PHP代码的潜在问题 #

• 先手动测试PHP接口：打开浏览器访问http://你的IP/submit_user_info.php，如果出现报错信息，先修复PHP的语法或数据库连接问题。
• 可以用Postman发POST请求，传入JSON参数{"name":"test","email":"test@test.com","phone_number":"123456"}，看PHP是否返回「Data Inserted Successfully into MySQL Database」，确认接口本身没问题。

6. 额外的React Native缓存问题 #

如果以上都没问题，试试重启模拟器和React Native服务，或者清除缓存：

npx react-native start --reset-cache

最后给你一个修改后的fetch代码示例 #

InsertDataToServer = () =>{
  const { TextInputName, TextInputEmail, TextInputPhoneNumber } = this.state ;
  fetch('http://192.168.1.105/submit_user_info.php', { // 替换成你的IP
    method: 'POST',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      name: TextInputName,
      email: TextInputEmail,
      phone_number: TextInputPhoneNumber
    })
  }).then((response) => response.text()) // 先转成text看原始返回，避免JSON解析失败
  .then((responseText) => {
    Alert.alert(responseText);
  }).catch((error) => {
    console.error('请求错误:', error);
    Alert.alert('网络请求失败，请检查配置');
  });
}

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