IOS 上の Expo Go アプリ: axios API 呼び出しでのネットワーク障害

概要

iPhone で反応ネイティブ アプリを実行するために expo go を使用しています。 API 呼び出しを処理するレンダリングでホストされているバックエンド サービスがあります。 axios を使用してこのサービスを呼び出そうとしています。以下に、アプリ全体で API 呼び出しを処理するために作成したカスタム クラスを示します。サインインしていくつかのエンドポイントにアクセスすることはできますが、一部のエンドポイントでは「[AxiosError: Network Error]」と表示されるだけです。その場合、API には到達しませんが、ポストマンでエンドポイントに到達することはできます。アプリの起動時に「Web を開く」オプションを指定してアプリを実行した場合にも機能します。

エキスポコマンド:

npx expo start --tunnel

カスタムクラス:

import axios from 'axios';

class ApiService{

    constructor() {
        this.baseUrl =  process.env.API_URL;
        this.axios = axios.create({
            baseURL: this.baseUrl,
        });
    }

    async call(method, url, data) {
        const headers = {
        "Content-Type": "application/json",
        };

        try {
            let response = await this.axios({ method, url, data, headers });

            return response.data;
        } catch (err) {
            return err
        }
    }
}

const apiService = new ApiService();

export default apiService;

呼び出しの例 (エラー):

const res = (await apiService.call('get', `student/${student_id}/sports`)).data || [];

呼び出しの例 (成功):

const res= (await axios.get(process.env.API_URL + `student/${student_id}/sports`, {
    headers: {
        "Content-Type": "application/json",
    }
})).data?.data || [];

パッケージ json (関連するパッケージ):

"axios": "^1.6.8",
"expo": "~50.0.11",
"react-native": "0.73.6",
"react": "18.2.0",
"react-native-dotenv": "^3.4.11",
"@expo/metro-runtime": "~3.1.3",

約 1 週間前には機能していましたが、他の場所でエンドポイントにアクセスできるので、URL やバックエンドに問題はないようです。それは万博側の何かに関係しているのではないかと思います。 appTransportSecurityをapp.jsonに追加し、ノードモジュールを削除して、パッケージに互換性があることを確認して再インストールしようとしましたが、うまくいきませんでした。

解決策

私が遭遇した同様の問題。問題は、エンドポイントの SSL が期限切れになったか、無効になったことでした。このようなことが起こるもう 1 つの理由は、エンドポイントの http にある可能性があります。 IOS は http をサポートしません。バックエンド チームに https にするよう依頼してください (基本的にエンドポイントを保護します)。