React Native Expo物理设备无法连接本地Node.js API求助

问题背景 #

在物理设备上运行React Native Expo应用时，无法连接Node.js后端API，但该API在React.js网页应用中可正常访问。相关代码如下：

后端API代码 #

const port = process.env.PORT || 8800;
const host = '0.0.0.0'
  
app.listen(port,host,()=>{
    connect()
    console.log("connected to backend")
})

React Native前端配置与代码 #

package.json配置

{
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "tailwindcss": "^3.3.2"
  },
  "proxy": "http://192.168.1.10:8800/api"
}

注册页面提交代码

onSubmit={(values, action) => {
        const { cpassword, ...data } = values;
        console.log(data);
        const resp = axios
          .post("auth/register", data)
          .catch((err) => {
            console.log(data);
            if (err && err.resp) console.log("error", err);
            Alert.alert("Registration", "Something wrong", [
              {
                text: "Cancel",
                onPress: () => navigation.navigate("Register"),
                style: "cancel"
              },
              { text: "OK", onPress: () => navigate }
            ]);
          });
        if (resp) {
          Alert.alert("Registration", "Sign up Successfully!", [
            {
              text: "Cancel",
              onPress: () => navigation.navigate("Login"),
              style: "cancel"
            },
            { text: "OK", onPress: () => console.log("OK") }
          ]);
        }
      }}

问题原因 #

1. React Native不支持proxy配置：React.js中的proxy是Create React App专属特性，Expo环境下的React Native不兼容该配置，请求无法自动转发到后端地址。
2. 相对路径无法解析：当前axios使用相对路径"auth/register"，但React Native没有代理机制，无法识别该路径对应的后端地址。
3. 异步逻辑错误：axios请求是异步操作，代码中直接判断if (resp)会提前执行，无法正确获取响应结果。

解决方案 #

1. 使用完整API地址发起请求 #

将axios请求的相对路径替换为完整的后端API地址，确保物理设备能通过局域网访问该地址：

axios.post("http://192.168.1.10:8800/api/auth/register", data)

注意：需确认192.168.1.10是运行后端服务的机器在局域网内的真实IP，且物理设备与该机器处于同一WiFi网络。

2. 验证后端网络可访问性 #

• 确认后端监听0.0.0.0（你的代码已配置，无需修改），确保服务对外开放所有网络接口。
• 在物理设备的浏览器中访问http://192.168.1.10:8800/api/auth/register（用GET请求测试），若无法访问，检查后端机器的防火墙设置，确保8800端口未被拦截。

3. 优化异步请求逻辑 #

使用async/await处理axios异步请求，确保响应结果正确获取后再执行后续逻辑：

onSubmit={async (values, action) => {
  const { cpassword, ...data } = values;
  try {
    const resp = await axios.post("http://192.168.1.10:8800/api/auth/register", data);
    Alert.alert("Registration", "Sign up Successfully!", [
      {
        text: "Cancel",
        onPress: () => navigation.navigate("Login"),
        style: "cancel"
      },
      { text: "OK", onPress: () => console.log("OK") }
    ]);
  } catch (err) {
    console.log("error", err);
    Alert.alert("Registration", "Something wrong", [
      {
        text: "Cancel",
        onPress: () => navigation.navigate("Register"),
        style: "cancel"
      },
      { text: "OK", onPress: () => {} }
    ]);
  }
}}

4. 可选：用环境变量管理API地址 #

创建.env文件统一管理API地址，方便不同环境切换：

EXPO_PUBLIC_API_URL=http://192.168.1.10:8800/api

代码中调用方式：

axios.post(`${process.env.EXPO_PUBLIC_API_URL}/auth/register`, data)

注意：Expo环境下环境变量名必须以EXPO_PUBLIC_开头才能被识别。

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