web-dev-qa-db-ja.com

React-Nativeフェッチ、ネットワーク要求が失敗しました。ローカルホストを使用していない

フェッチを使用してユーザーを認証するアプリがあります。数日前まで機能していましたが、何も変更していません。反応0.27から0.28にアップグレードしただけで、フェッチは機能しません。

私はほぼ2日間検索し、stackoverflowのほとんどすべての質問を読みました。 localhostから何かを取得しようとするユーザーのほとんどは、実際のIPアドレスに変更すると、動作するようになります。しかし、ローカルホストからは何も取得しませんでした。また、以前は機能していた私のコードも。

ここに私のコードがあります：

fetch('http://somesite.com/app/connect', {
      method: 'POST',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
        'language':'en-US',
        'Authorization': 'Bearer ' + access_token,
      },
      body: JSON.stringify({
        uid: uid,
        refresh_token: refresh_token,
        token: access_token,
        device: device_id,
        device_name: device_name,
      })
    })
.then((response) => response.json())
.then((responseData) => {
    console.log(JSON.stringify(responseData.body))
})
.catch((err)=> {
  console.log('Some errors occured');
  console.log(err);
})
.done();

私はいくつかの新しいプロジェクトを簡単に作成しようとしましたが、チュートリアルから簡単なフェッチ例を使用しましたが、同じエラーが発生しました。エミュレータのブラウザを介して接続しようとしているウェブサイトを開こうとしましたが、動作しますが、アプリを通じてどのウェブサイト/ IPにも接続できないようです。 chrome consoleでこのエラーが発生します。

TypeError: Network request failed
    at XMLHttpRequest.xhr.onerror (http://localhost:8081/index.ios.bundle?platform=ios&dev=true&hot=true:28193:8)
    at XMLHttpRequest.dispatchEvent (http://localhost:8081/index.ios.bundle?platform=ios&dev=true&hot=true:14591:15)
    at XMLHttpRequest.setReadyState (http://localhost:8081/index.ios.bundle?platform=ios&dev=true&hot=true:29573:6)
    at XMLHttpRequest.__didCompleteResponse (http://localhost:8081/index.ios.bundle?platform=ios&dev=true&hot=true:29431:6)
    at http://localhost:8081/index.ios.bundle?platform=ios&dev=true&hot=true:29506:52
    at RCTDeviceEventEmitter.emit (http://localhost:8081/index.ios.bundle?platform=ios&dev=true&hot=true:13428:23)
    at MessageQueue.__callFunction (http://localhost:8081/index.ios.bundle?platform=ios&dev=true&hot=true:11999:23)
    at http://localhost:8081/index.ios.bundle?platform=ios&dev=true&hot=true:11906:8
    at guard (http://localhost:8081/index.ios.bundle?platform=ios&dev=true&hot=true:11857:1)
    at MessageQueue.callFunctionReturnFlushedQueue (http://localhost:8081/index.ios.bundle?platform=ios&dev=true&hot=true:11905:1)

実際、私はここでこのユーザーと同じ問題を抱えています： React-nativeネットワーク要求は常に失敗します

更新： xcodeからのinfo.plist

どんな助けも感謝します！

javascriptiosreactjsreact-nativefetch
29
Ata Mohammadi

次のリンクを確認してください： https://github.com/facebook/react-native/issues/8118

React Native 0.28で問題が発生したようです。解決策は、Reactが作成するios> buildフォルダーにあるinfo.plistファイルの「任意のロードを許可する」ことです。

Xcodeでiosフォルダー全体を開いてから、このinfo.plistファイルを開くと、任意のロードを許可する新しいキーを作成でき、問題が修正されます。

Allow Arbitrary Loads

61
Ahmed Haque

Info.plistの設定は私にとっても機能しません。 iOSで実行しようとしています。

0
GustavoSevero

この問題は、コードがHTTPSではなくHTTPエンドポイントを取得しようとしているため、推奨されていません。 localhostサーバーから取得する場合、簡単な解決策は Ngrok httpsエンドポイントを介してlocalhostサーバーを公開することです。

手順：

  1. Ngrokをダウンロードして実行ngrok http 8081ターミナル/ cmdから、8081をローカルホストサービスポートに変更する必要があります。

  2. Ngrokはhttps転送エンドポイントを提供します。これを使用して、localhostサーバーにアクセスします。

0
Allan Jiang