React Native条码扫描App真机运行POST请求提交失败

• React Native开发的条码扫描应用，Web端运行时所有功能正常，可正常通过POST方式向API提交数据到服务器
• Android、iOS真机运行时无法完成数据POST提交
• 尝试将API地址中的localhost替换为http://10.0.2.2后问题仍未解决

代码里存在多处直接导致真机请求失败的问题，并非单纯地址配置错误：

1. fetch写法完全错误：没有正确处理Promise链式调用，try/catch位置不对，根本捕获不到异步请求的报错
2. 误用Web端专属配置：mode:'no-cors'是浏览器环境fetch的专属参数，React Native原生运行环境不支持这个配置，添加后会直接导致请求异常
3. 本地服务地址用错：10.0.2.2是Android模拟器访问宿主机的专用地址，真机调试完全不能用这个地址；iOS真机同样不能用localhost访问本地服务
4. 请求头配置错误：Access-Control-Allow-*这类CORS头是服务端返回给客户端的配置，放在前端请求头里无效，反而可能触发OPTIONS预检请求失败
5. 按钮事件逻辑错误：OK按钮的onPress里直接写了Register()，页面渲染时就会立即执行请求，不是点击按钮才触发；同时navigation.navigate传第三个参数当回调的写法也是无效的

1. 配置正确的API地址 #

• 真机调试时，确保手机和开发电脑连接同一个WiFi，将API地址替换为开发电脑在局域网内的实际IP，格式类似http://192.168.x.x/api/insert.php（可在电脑网络设置中查到本机局域网IP）
• 仅在使用Android模拟器调试时，才用http://10.0.2.2替代localhost；iOS模拟器可以直接用http://localhost/api/insert.php
• 如果本地服务用的是自签名HTTPS证书，开发阶段建议先临时用HTTP地址测试，否则Android/iOS默认会拦截不可信证书的请求

2. 重写数据提交函数 #

把原来的Register函数替换为正确的异步写法：

const Register = async () => {
  // 替换为前面配置的正确API地址
  const InsertAPIURL = "http://你的实际局域网IP/api/insert.php";
  const headers = {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
  }
  const Data = {
    userid: userid,
  };

  try {
    const response = await fetch(InsertAPIURL, {
      method: 'POST',
      headers: headers,
      body: JSON.stringify(Data)
      // 删除mode:'no-cors'配置
    })
    const result = await response.json();
    alert(result[0].Message);
    // 请求成功后再执行页面跳转
    navigation.navigate('Home', { userid });
  } catch (error) {
    alert("请求失败：" + error.message);
  }
}

3. 修正按钮点击事件 #

把OK按钮的onPress改成正确的回调写法，避免页面加载时就触发请求：

{
  scanned && <Button title={'OK'} onPress={Register} />
}

4. 本地服务检查 #

• 确保本地后端服务绑定的是0.0.0.0，而不是默认的127.0.0.1，否则局域网内的真机无法访问到服务
• 后端服务要配置正确的CORS规则，允许移动端来源的跨域请求，不要把CORS相关头写在前端请求里

改完后先在手机自带浏览器里直接输入配置好的API地址，能正常访问说明网络连通性没问题，再启动应用测试即可。如果还是失败，可以在请求前后加console.log打印日志，通过调试工具查看具体报错信息定位问题。

内容的提问来源于stack exchange，提问作者d.chan