Expo React Native Android 模拟器无法连接 Express 后端

Question

我正在构建一个 React Native 前端，其中包含 Expo（托管工作流程）和本地运行的 Express 后端。我的应用程序在 web 版本上运行良好（使用

expo start --web

），但是 当我在 Android 模拟器上测试时，前端无法连接到后端。我尝试了很多方法，但似乎没有任何效果。

我尝试过的事情

1. 更改了 .env.development

    中的 API URL

   ：

   • API_URL=http://10.0.2.2:3000

     （适用于Android模拟器）

   • API_URL=http://192.xxx.x.x:3000

     （我的本地IP地址）

   • API_URL=http://localhost:3000

2. 更新了

   app.json

   以允许明文流量：

   "expo": {
     "android": {
       "usesCleartextTraffic": true
     }
   }
   
   

3. 确认后端正在运行：

   • 在我的浏览器中访问 http://localhost:3000 工作正常。 禁用防火墙/防病毒软件以确保它们不会阻止请求。

4. 使用我的本地 IP 在 Postman 中测试了 API URL，并且它有效。

相关代码参考：

.env.开发：

#API_URL for web
#API_URL=http://localhost:3000

#API_URL for android
API_URL=http://10.0.2.2:3000

前端 API 调用示例：

auth.ts：

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',
    },
    body: JSON.stringify({ email, password }),
  });
  const data = await response.json();
  if (!response.ok) {
    throw new Error(data.error);
  }
  return data;
};

我有一个基本的 cors 政策，我认为不会影响这一点：

// CORS configuration to allow requests from the frontend
const corsOptions = {
  origin: true,
  credentials: true, // Allow credentials (cookies, headers)
};

app.use(cors(corsOptions));

// Handle preflight requests for all routes
app.options('*', cors(corsOptions));

如果需要其他信息，请告诉我。

Answer 1

在 Simon 的一个视频中，他说将网址更改为

http://10.0.2.2:<port>

可以解决问题。你会忽略什么吗？