React Native Android 应用程序网络请求在物理设备上失败

Question

我是 React Native 新手，目前我正在使用一个裸工作流程 React Native，无需博览会。 场景是 -设置一个 docker keycloak 领域服务来测试一些身份验证，以便在通过身份验证时吐出令牌

-使用 Android Studio 运行虚拟设备（虚拟电话）时，我能够进行身份验证并从 docker keycloak 服务获取令牌。还用 Postman 进行了测试，我也得到了一个令牌。

-当我通过 android 文件夹中的 ./gradlew assembleRelease 生成 apk 并将其安装到我的设备上时，我总是收到“网络请求失败”的错误 -如果我在连接到 PC 时插入手机并使用它来调试应用程序，我仍然会收到网络请求失败

-所以，我使用 HTTP 而不是 HTTPS 发送请求，并且我确保转到 AndroidManifest.xml 并设置

-之前当我使用本地 192.168.etc...:8080 时，网络请求会立即失败。现在，如果我使用 10.0.2.2，它会等待大约 7-10 秒，然后才会收到 Network request failed

感谢任何人的帮助。我在这里碰壁了，我不熟悉网络或连接。

这是我的登录处理程序的代码段

//------------------------------------------------------------ --------------

const loginHandler = async () => {
const url = `http://10.0.2.2:8080/realms/testrealm/protocol/openid-connect/token`;
const body = `client_id=login-client&client_secret=SOME+RANDOM+CHARS&username=${encodeURIComponent(username)}&password=${encodeURIComponent(password)}&grant_type=password`;

const timeoutPromise = new Promise((_, reject) =>
  setTimeout(() => reject(new Error('Request timed out')), 15000)
);

try {
  setMessage('');
  console.log('Perform login with:', username, password);
  console.log('URL FOR LOGGING:', url);
  console.log('BODY OF URL:', body);

  const fetchPromise = fetch(url, {
    method: 'POST',
    mode: 'cors',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
    },
    body: body,
  });

  const response = await Promise.race([fetchPromise, timeoutPromise]);

  console.log('Response Status:', response.status);

  if (!response.ok) {
    const responseBody = await response.text();
    console.log("LOGIN FAILED", response.status, responseBody);
    setMessage(`Login failed with status ${response.status}: ${responseBody}`);
    setMessageColor('red');
    throw new Error(`Login failed | "LOGIN FAILED", ${response.status}, ${responseBody}, URL: ${url}`);
  }

  const data = await response.json();
  console.log('Login successful!:', data);
  setMessage('Login successful!');
  setMessageColor('green');
} catch (error) {
  console.error('Login error:', error);
  setMessage(`Login error: ${error.message}`);
  setMessageColor('red');
}

};

//------------------------------------------------------------ ------------------------------------------

• 尝试在 AndroidManifest.xml 中设置 android:usesCleartextTraffic="true"
• 将本地 IP 地址更改为 10.0.2.2，而不是 192.168.etc... -使用我的物理电话设备进行调试和

Answer 1

http://10.0.2.2:8080

这只适用于模拟器联系主机上的服务器。 对于物理设备，您需要服务器的实际 IP，并且您的 wifi 网络需要设置为允许从内部设备到服务器的 IP 和端口的流量。 这可能需要配置您的 WiFi 路由器，并且仅当它们位于同一 WiFi 网络上时才有效。 当您想要进行真正的生产构建时，您需要设置一个具有公共 IP、DNS 记录等的真实服务器。