web-dev-qa-db-ja.com

React Fetch throws Network Request Failedによるネイティブポストリクエスト

次のエラーに遭遇しました。現時点では、Android App with React= Nativeを開発しています。そのため、私はfetchを使用して投稿リクエストを行う予定です。

fetch("https://XXreachable-domainXX.de/api/test", {
            method: "post",

            body: JSON.stringify({
                param: 'param',
                param1: 'param',

            })
        }
    )
        .then((response) = > response.json()
    )
    .
    then((responseData) = > {
        ToastAndroid.show(
        "Response Body -> " + JSON.stringify(responseData.message), ToastAndroid.SHORT
    )
})
    .
    catch((error) = > {
        console.warn(error);
})
    ;

アプリは現在エラーをスローします:

TypeError:ネットワークリクエストに失敗しました

コードをGET-Requestに変更すると、ブラウザでwindow.alert()が戻り値として機能し、クールになり、chrome拡張機能Postmanがデータを返します正しく。

29
arnebr

このReact Nativeのエラーはかなり役に立たないので、最初に実際の根本的なエラーを取得する必要があります。最も簡単な方法は、HttpsURLConnection

私にとって実際のエラーはJava.security.cert.CertPathValidatorException: Trust anchor for certification path not found.これにはよく知られた解決策があります。 https://developer.Android.com/training/articles/security-ssl.html#MissingCa

ブラウザとPostmanがリクエストに問題がないことを考えると、これはおそらくあなたのケースでもあります。確認するには、openssl s_client -connect XXreachable-domainXX.de:443 -showcerts。証明書エラーがある場合は、最初に修正してください。ネイティブプログラムを作成する時間を節約できます。

編集:実際には、基になるすべてのAndroid反応ネイティブのエラーを確認する最も簡単な方法は、ターミナルで 'adb logcat'を実行することです

9
Antonio

Windows OS/PHPビルトインserver/react-nativeを使用した開発Androidデバイスで:

  • サーバーのローカルIPアドレス(ipconfig)を確認します。 172.16.0.10
  • 反応ネイティブfetchでは、このURLと適切なポートを使用します(fetch('http://172.16.0.10:8000/api/foo)
  • PHP localhostの代わりにこの特定のIPを備えた組み込みサーバー:php -S 172.16.0.10:8000 ...
  • プライベートネットワークのWindowsファイアウォールをオフにする

これにより、Android電話とローカルサーバー間の接続の問題が修正されました。

13
mp31415

このエラーが発生し、すべてが正常に機能していることが確実な場合andエミュレーターを実行している場合は、エミュレーターを閉じて再度起動します。

今すぐ実行されるはずです。

これは通常、しばらくシステムを休止状態にした後に発生します

4
Stephen King

エミュレータでこの問題が発生した場合は、デバイスでもテストしてください。それはおそらくそこに起こっていないでしょう。

回避できるかどうかを心配する必要はありません。

0
iuliu.net

この問題は、Androidの期限切れの証明書が原因で発生しました。エラーメッセージはcom.Android.org.bouncycastle.jce.exception.ExtCertPathValidatorException: Could not validate certificate: Certificate expired at Fri Sep 29 16:33:39 EDT 2017 (compared to Fri Dec 08 14:10:58 EST 2017)でした。

digicert.com を使用してこれを確認できました。

残念ながら、React Nativeコードを掘り下げて、バンドル内のXHRコードをデバッグする必要がありました(index.Android.bundle)エラーメッセージと問題のURLを見つけるため。ログコードの一部に含まれていたため、明らかにコンソールにもログを記録しませんでした。 :)

このGitHubの問題のコメント に助けられました。

0
bcr

以下の2つのケースを確認してください

  1. 間違ったエンドポイント
  2. インターネット接続:実デバイス、仮想デバイスの両方

2番目の理由で2時間食べました。

0
Tuan Nguyen

Androidエミュレータ。 。

修正は、投稿データがパラメータ化されていることを確認することでした。(それがWordだと確信しています)

export const loginUser = ({ userName, password }) => {
const data = `UserName=${userName}&Password=${password}&grant_type=password`
    return (dispatch) => {
        dispatch({ type: LOGIN_USER })

        fetch(URL_LOGIN, {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
            },
            body: data
            // body: {

            //     UserName: userName,
            //     Password: password,
            //     grant_type: 'password'

            // }

        })
            .then((response) => { 
                loginUserSuccess(dispatch, response)
            })
            .catch((response) => {
                loginUserFailed(dispatch, response)
            })
    };
};
0
tlagreca