Expo React Native 无法发送请求

Question

我正在使用 Expo 框架开发 React Native 应用程序。我能够创建一个开发客户端并将其安装在我的 iOS 设备上。该应用程序似乎可以工作，至少我可以打开该应用程序并访问登录流程。

但是，当我尝试登录时，它失败了：

 LOG  Sending request to: http://127.0.0.1:5000/api/v1/verify_user.json
 ERROR  Network request failed: [TypeError: Network request failed]

以下是我所知道的事情：

1. 端点没有问题。

> curl -H "Content-Type: application/json" -X POST "http://127.0.0.1:5000/api/v1/verify_user.json" -d '{"user":{"email":"[email protected]","is_verified":true}}'
{"success":true}%

2. 可以在 Web 部分上登录，没有任何问题。

然而，当涉及到 iOS 应用程序时，事情开始出现问题。这是负责手机登录的函数

ContinueWithEmail.tsx

:

  const verifyUserEmail = async (email: string) => {
    const authEndpoint = 'http://127.0.0.1:5000/api/v1/verify_user.json';

    try {
      console.log('Sending request to:', authEndpoint);
      const response = await fetch(authEndpoint, {
        method: 'POST',
        headers: {
          Accept: 'application/json',
          'Content-Type': 'application/json',
        },
        body: '{"user":{"email":"[email protected]","is_verified":true}}',
      });

      console.log('Response status:', response.status);
      const responseData = await response.json();
      console.log('Response data:', responseData);

      if (response.ok) {
        if (email && me && Platform.OS !== 'web')
          if (email !== me.email) {
            AsyncStorage.setItem('special_offer', '');
            clearCache && clearCache();
          }
        if (!(!!errors.email && !isValid)) {
          navigation.navigate('continue-with-email-password');
        }
      } else if (responseData.auth_provider) {
        if (Platform.OS === 'web') {
          setShowProviderModal(true);
          setErrorName(responseData.error);
        }
        Alert.alert(
          m('onBoarding.error.title'),
          responseData?.error,
          [
            {
              text: m('onBoarding.error.errorMsg', {
                provider: responseData.auth_provider,
              }),
              onPress: () => loginPress(),
            },
            {
              text: 'Dismiss',
              onPress: () => {},
            },
          ],
          {
            cancelable: true,
          }
        );
      } else if (responseData.error) {
        setErrors({ email: responseData?.error });
      }
    } catch (error) {
      console.error('Network request failed:', error);
      Alert.alert(
        'Network Error',
        'There was a problem connecting to the server. Please check your internet connection and try again.'
      );
    }
  };

由于我不是移动开发人员，所以我对如何调试它几乎一无所知。任何指点将不胜感激！

Answer 1

所以您应该首先检查一些事情，

1. 如果您的应用程序未与您的 API 通信，请尝试首先检查您在应用程序上调用的 URL 地址，例如，如果您在 PC 上运行 API，在手机上运行 DevClient 应用程序，则该地址不应该是“localhost”，而是运行 API 的 IP 地址，

2. 您的应用程序可能会阻止“HTTP”请求，为了允许您的应用程序使用http请求而不是https，您应该在app.json中启用一些属性（正如您在使用expo时提到的）。

这里有一个关于如何在 iOS 设备应用程序上启用“HTTP”协议请求的示例

app.json

ios: {
    buildNumber,,
    bundleIdentifier,
    infoPlist: {
      NSAppTransportSecurity: { NSAllowsArbitraryLoads: true }, // ? enable HTTP requests
    },

这里有一个关于如何在 Android 上以及 app.json 上执行此操作的示例

 [
      'expo-build-properties',
      {
        android: {
          usesCleartextTraffic: true, // ? enable HTTP requests
        },
        ios: {
          flipper: true,
        },
      },
    ],

请注意，我使用

expo-build-properties

来编辑预构建上的本机代码以启用 CleartextTraffic，您应该编辑您的 Android 清单

我曾经回答过一个可能与过去相关的问题，这里有一些可能有用的链接

如何使用Expo启用HTTP请求？ https://docs.expo.dev/versions/latest/sdk/build-properties/ https://developer.android.com/privacy-and-security/risks/cleartext-communications