React Native用Fetch连接MySQL遇Network request failed错误，按教程操作仍未解决

我之前做React Native和本地Wamp交互时也踩过这个坑，结合你的情况，咱们一步步排查可能的问题：

1. 网络地址的坑：别用localhost，换成电脑的局域网IP #

React Native模拟器（不管Android还是iOS）的localhost指向的是模拟器自身的虚拟机，不是你运行Wamp的电脑。所以你得把请求URL里的localhost换成电脑的局域网IP（比如192.168.1.100）。

• 怎么查局域网IP？Windows按Win+R输入cmd，然后敲ipconfig，找到「以太网适配器 本地连接」里的「IPv4地址」。
• 如果是Android模拟器，也可以用10.0.2.2（Android模拟器专门用来指向宿主电脑的特殊IP），但用局域网IP更通用，真机测试也能直接用。

2. 必须添加跨域请求头 #

浏览器访问localhost/react没问题，但RN的Fetch属于跨域请求（RN的运行环境和Wamp的Apache不在同一个域），所以必须在你的PHP文件开头添加跨域允许的响应头：

// 在user_registration.php最顶部添加
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: POST, GET, OPTIONS");
header("Access-Control-Allow-Headers: Content-Type");

这一步很关键，很多人就是因为没加这个导致请求被拦截。

3. 检查Fetch请求的写法是否正确 #

确保你的Fetch请求的方法、头、参数格式都和PHP接口匹配：

fetch('http://192.168.1.100/react/user_registration.php', {
  method: 'POST', // 注册/登录一般用POST，别用GET
  headers: {
    'Content-Type': 'application/json', // 如果PHP接口接收JSON格式
    // 要是接口接收表单格式就改成 'Content-Type': 'application/x-www-form-urlencoded'
  },
  body: JSON.stringify({
    // 这里放你的用户名、密码等参数
    username: 'test_user',
    password: 'test_pwd'
  })
})
.then(response => {
  if (!response.ok) {
    throw new Error('Network response was not ok');
  }
  return response.json();
})
.then(data => console.log('Success:', data))
.catch(error => console.error('Error:', error));

另外，记得在RN的调试控制台（Ctrl+M打开）看具体的错误信息，有时候会有更详细的提示。

4. 检查Wamp和Windows防火墙的状态 #

• 确认WampServer的图标是绿色的，说明Apache和MySQL都正常运行。如果是橙色，说明服务没启动成功，右键Wamp选择「Start All Services」。
• Windows防火墙可能会拦截Apache的80端口，你可以临时关闭防火墙试试，如果关闭后请求正常，就在防火墙里添加一条允许Apache（httpd.exe）的入站规则。
• 检查Apache端口是否被占用：右键Wamp -> Apache -> Service -> Test Port 80，如果提示端口被占用，就换个端口（比如8080），然后记得把请求URL里的端口也加上（比如http://192.168.1.100:8080/react/user_registration.php）。

5. 先测试PHP接口本身是否正常 #

用Postman或者浏览器的开发者工具，直接给http://localhost/react/user_registration.php发POST请求，带上参数，看看能不能返回正确的响应。如果接口本身就报错，那得先排查PHP代码的问题（比如数据库连接是否正确，SQL语句有没有错），和RN无关。

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