React Native Expo无法连接Express API，React及浏览器可正常访问

我用React Native Expo（Android端）、React和Express搭建了API服务。直接访问API地址、通过React项目请求都能正常获取响应，但React Native请求时控制台报错Error fetching data: [TypeError: Network request failed]，JS调试器无输出。已经尝试更换端口、使用axios、配置CORS、多次重启服务、检查权限，问题仍存在。

Express 服务代码 #

const express = require('express');
const cors = require('cors'); // 导入cors中间件
const app = express();
const port = 4321;

// 使用cors中间件
app.use(cors());

app.get('/', (req, res) => {
  res.send({message: 'Hello'});
});

app.listen(port, () => {
  console.log(`Server is running on http://localhost:${port}`);
});

React Native 代码 #

import React, { useEffect } from 'react';

const App = () => {
  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('http://localhost:4321');
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }

        const data = await response.json();
        console.log('Data from the server:', data);
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    };

    fetchData();
  }, []);

  return (
    <></>
  );
};

export default App;

React 项目代码（与React Native逻辑一致） #

import React, { useEffect } from 'react';

const App = () => {
  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('http://localhost:4321');
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }

        const data = await response.json();
        console.log('Data from the server:', data);
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    };

    fetchData();
  }, []);

  return (
    <></>
  );
};

export default App;

问题排查与解决方案 #

1. 替换localhost为电脑局域网IP #

Android模拟器里的localhost指向模拟器自身，不是运行Express服务的电脑。操作步骤：

• 查电脑局域网IP：Windows用ipconfig，Mac/Linux用ifconfig或ip addr
• 把React Native代码里的http://localhost:4321换成http://你的局域网IP:4321，比如http://192.168.1.100:4321

2. 开放防火墙端口 #

检查电脑防火墙是否允许4321端口的入站请求，避免模拟器无法连接到Express服务。

3. 修改Express服务监听地址 #

把Express的listen地址改成0.0.0.0，确保服务监听所有可用网络接口：

app.listen(port, '0.0.0.0', () => {
  console.log(`Server is running on http://0.0.0.0:${port}`);
});

4. 真机测试用公网隧道 #

如果用真机测试且不在同一局域网，可：

• 用ngrok http 4321把Express服务暴露到公网，得到临时公网地址
• React Native代码里请求这个公网地址

5. 确认Android网络权限 #

Expo默认已配置，但裸项目需确保AndroidManifest.xml里有以下权限：

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

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