ローカルRestAPIへのGET要求を行うときのネットワークエラー

Question

私はRestAPIsとReact（ネイティブ）に対して非常に新しいです。しかし、私は少しのRest APIを設定しました。残りのAPIは、完全に有効なJSONを返すようです。私はURL：http://127。*。***。*：7000/profile/api/products/ でAPIにアクセスします。ご覧のとおり、私は自分のlocalhostにいます。

私は、フェッチ/ axios（両方を試してみました）でGETリクエストを作ってみる：

componentWillMount() { 
     axios.get("http://127.0.0.1:7000/profile/api/products/") 
     .then(response => this.setState({products: response.data})) 
     .catch((error) => console.log(error)); 
    } 

をしかし、私はネットワークエラーを取得します。誰かが助けることができる？私は本当にエラーがどこにあるのか分からないので、森で少し失われているように感じます。

Error: Network Error 
    at createError (C:\Users\Computer\Documents\Apps\charlees\node_modules\axios\lib\core\createError.js:16) 
    at XMLHttpRequest.handleError (C:\Users\Computer\Documents\Apps\charlees\node_modules\axios\lib\adapters\xhr.js:88) 
    at XMLHttpRequest.dispatchEvent (C:\Users\Computer\Documents\Apps\charlees\node_modules\event-target-shim\lib\event-target.js:172) 
    at XMLHttpRequest.setReadyState (C:\Users\Computer\Documents\Apps\charlees\node_modules\react-native\Libraries\Network\XMLHttpRequest.js:548) 
    at XMLHttpRequest.__didCompleteResponse (C:\Users\Computer\Documents\Apps\charlees\node_modules\react-native\Libraries\Network\XMLHttpRequest.js:381) 
    at C:\Users\Computer\Documents\Apps\charlees\node_modules\react-native\Libraries\Network\XMLHttpRequest.js:487 
    at RCTDeviceEventEmitter.emit (C:\Users\Computer\Documents\Apps\charlees\node_modules\react-native\Libraries\vendor\emitter\EventEmitter.js:181) 
    at MessageQueue.__callFunction (C:\Users\Computer\Documents\Apps\charlees\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:306) 
    at C:\Users\Computer\Documents\Apps\charlees\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:108 
    at MessageQueue.__guard (C:\Users\Computer\Documents\Apps\charlees\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:269) 

Answer 1

これはエミュレータ上にある場合は192.168.1.XのようなマシンIPを置くか、その

Answer 2

のようなものより完全な初心者があります念のうち、ここでStackOverflowの上で自分自身を困らする準備ができてのいずれかしてみてください、ここでは、反応ネイティブとDjango-Rest-Frameworkを組み合わせたすべての人のためのソリューションがあり、このエラーが発生します。

まず、ローカルホストのip（127.xxx）を10.0.2.2に変更して、APIへのリクエストがこのように見えるようにします。これはエミュレータのためです。あなたのローカルホストのIPは、エミュレータ自体を指していますが、ローカルコンピュータにアクセスする必要があります。

axios.get("http://10.0.2.2:8000/profile/api/products/") 
     .then(response => this.setState({products: response.data})) 
     .catch((error) => console.log(error)); 

は、その後、あなたのDjangoプロジェクトの設定内のホストを許可するIPを追加する必要があります。 だから、あなたが追加する必要があります...あなたが行く

ALLOWED_HOSTS = ['10.0.2.2'] 

そして、そこを

Answer 3

関連のある議論を：あなたを行う際

ifconfig | grep "inet " | grep -Fv 127.0.0.1 | awk '{print $2}' 

： https://github.com/facebook/react-native/issues/10404

は、あなたのIPを決定ネットワーク要求、localhostにしないでください。 あなたのIPを使用してください。

例：githubのユーザーStephanPartzschによって

fetch('http://10.0.0.19:8080') 
    .then((response) => response.json()) 

グレート説明：

事は、iOSシミュレータで実行されているとAndroidエミュレータで実行されている であること、です。ローカルホストは、コードが実行されている環境 を指しています。エミュレータは実際のデバイス をエミュレートしますが、シミュレータはデバイスのみを模倣しています。したがって、iOS/Androidの ローカルホストは、エミュレートされたiOS/Androidデバイスを指しています。サーバーが稼動しているマシンではなく、 です。解決策は、 ローカルホストをマシンのIPアドレスに置き換えることです。