Expo(React Native)与Express网络请求失败问题排查求助

1. 确认网络环境一致性 #

• 保证Expo运行设备（模拟器/真机）和后端服务器处于同一局域网：真机需连接相同WiFi，模拟器默认走局域网但需确认无代理干扰。
• 用设备浏览器直接访问后端地址（如http://172.11.60.128:3333），若无法打开，优先排查路由器防火墙、服务器网络权限问题。

2. 修正Express监听配置 #

后端必须监听0.0.0.0才能允许局域网设备访问，不能只监听localhost：

// 错误写法（仅本机可访问）
app.listen(3333, 'localhost', () => {
  console.log('Server running on localhost:3333');
});

// 正确写法（允许局域网所有设备访问）
app.listen(3333, '0.0.0.0', () => {
  console.log('Server running on 0.0.0.0:3333');
});

3. 配置Expo网络权限 #

在app.json中添加对应平台的网络权限，解决HTTP明文请求限制：

{
  "expo": {
    "ios": {
      "infoPlist": {
        "NSAppTransportSecurity": {
          "NSAllowsArbitraryLoads": true // 开发阶段允许所有HTTP请求，生产环境可配置指定域名
        }
      }
    },
    "android": {
      "usesCleartextTraffic": true // Android 9+默认禁止HTTP明文请求，必须开启
    }
  }
}

4. 检查API请求代码细节 #

确保请求逻辑正确，避免渲染阶段直接调用异步函数：

connect+api.ts示例 #

export const testConnection = async () => {
  try {
    const response = await fetch('http://172.11.60.128:3333/api/health');
    if (!response.ok) throw new Error(`请求失败，状态码：${response.status}`);
    const data = await response.json();
    console.log('连接成功:', data);
    return data;
  } catch (error) {
    console.error('请求出错:', error);
    throw error;
  }
};

MyScreen.ts调用示例 #

import React, { useEffect } from 'react';
import { View, Text } from 'react-native';
import { testConnection } from './connect+api';

const MyScreen = () => {
  useEffect(() => {
    const initConnection = async () => {
      await testConnection();
    };
    initConnection();
  }, []);

  return <View><Text>查看控制台日志确认连接状态</Text></View>;
};

export default MyScreen;

5. 排查防火墙与拦截工具 #

• 临时关闭后端服务器的防火墙，测试是否能正常连接，确认后再添加3333端口的入站规则。
• 关闭代理工具（如Charles、Fiddler）或杀毒软件，避免其拦截Expo的网络请求。

6. 模拟器特殊适配 #

• iOS模拟器：可直接使用localhost，若用IPv4需确认模拟器网络为桥接模式。
• Android模拟器：若IPv4访问失败，可尝试用10.0.2.2（模拟器映射电脑本地的特殊地址）替代IPv4。

按上述步骤逐一排查，即可在进入MyScreen页面时看到连接成功的控制台日志。

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