Expo React Native安卓模拟器无法连接Express后端求助

问题背景 #

使用Expo托管工作流开发React Native前端，搭配本地Express后端时，网页版（expo start --web）可正常连接，但安卓模拟器无法建立连接，已尝试修改API_URL、开启明文流量、确认后端运行状态、Postman测试API等方案均无效。

进一步排查与解决步骤 #

1. 确认后端服务绑定地址

Express默认监听localhost（仅本机可访问），需修改为监听0.0.0.0以允许局域网设备访问：

// 原代码可能是
app.listen(3000);

// 修改为
app.listen(3000, '0.0.0.0', () => {
  console.log('Server running on http://0.0.0.0:3000');
});

修改后重启后端服务，再用模拟器访问本地IP地址（如http://192.xxx.x.x:3000）测试。

2. 验证安卓模拟器的网络可达性

打开模拟器内置浏览器，直接访问后端地址（http://10.0.2.2:3000或本地IP）：

• 若浏览器无法访问：排查模拟器网络设置（如代理是否开启、是否与电脑同属一个WiFi），或确认电脑防火墙已完全关闭。
• 若浏览器可访问：问题出在前端代码或环境变量加载环节。

3. 确保Expo环境变量正确加载

清除Expo缓存并重启服务，避免环境变量未更新：

expo start -c

重启后在模拟器中重新加载App，查看前端控制台打印的API_URL是否正确（已在login函数中添加日志）。

4. 调整前端Fetch请求配置

若后端开启了credentials: true，前端Fetch需同步添加credentials配置，否则可能触发CORS限制：

export const login = async (email: string, password: string) => {
  console.log("API_URL", API_URL);
  const response = await fetch(`${API_URL}/auth/login`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    credentials: 'include', // 添加这一行
    body: JSON.stringify({ email, password }),
  });
  // ... 后续代码不变
};

5. 排查CORS配置细节

在后端添加日志，确认请求的Origin是否被正确允许：

// 在CORS中间件前添加日志
app.use((req, res, next) => {
  console.log('Received request from origin:', req.headers.origin);
  next();
});

// 原CORS配置
const corsOptions = {
  origin: true,
  credentials: true,
};
app.use(cors(corsOptions));
app.options('*', cors(corsOptions));

查看后端控制台的Origin输出，若存在未被允许的Origin，可针对性设置origin为具体值（如['http://localhost:19006', 'exp://192.xxx.x.x:19000']）。

6. 检查安卓模拟器代理设置

进入模拟器「设置」-「网络与互联网」-「WiFi」，长按当前连接的网络选择「修改网络」，将代理设置为「无」，避免代理干扰本地网络访问。

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