प्रतिक्रियाशील मूलनिवास () नेटवर्क अनुरोध विफल

146

जब मैं react-native init(RN संस्करण 0.29.1) का उपयोग करके एक नया प्रोजेक्ट बनाता हूं और सार्वजनिक facebook डेमो मूवी एपीआई के लिए रेंडर विधि में एक भ्रूण डाल देता हूं, तो यह एक फेंकता है Network Request Failed। एक बहुत बेकार स्टैक ट्रेस है और मैं क्रोम कंसोल में नेटवर्क अनुरोधों को डीबग नहीं कर सकता। यहाँ मुझे लाने वाला है:

fetch('http://facebook.github.io/react-native/movies.json')
      .then((response) => response.json())
      .then((responseJson) => {
        return responseJson.movies;
      })
      .catch((error) => {
        console.error(error);
      });
javascript  react-native  fetch-api 
— एलियन हर्स्ट
स्रोत
1
मुझे यकीन नहीं है। मैं आईओएस सिम्युलेटर का उपयोग कर रहा हूं और मुझे लगा कि इसने मेरे कंप्यूटर के इंटरनेट कनेक्शन का उपयोग किया है
— Alek Hurst
सिम्युलेटर को मैन्युअल रूप से लोड करने और सफारी में url खोलने की कोशिश करें
— FuzzyTree
5
http-> https(यदि संभव हो तो) आपकी समस्या को ठीक कर देगा
— निक जुबेर
1
मैं अपने सर्वर को उस आईपी 192.168.1.25:3000से ifconfigबंधे बिना आईपी ​​का उपयोग कर रहा थाrails server --binging=192.168.1.25 --port=3000
— Fabrizio Bertoglio
1
हां मैंने सभी की कोशिश की। मेरे लिए कुछ भी काम नहीं किया
— विग्नेश्वरन ए

जवाबों:

140

यहाँ समस्या यह है कि iOS डिफ़ॉल्ट रूप से HTTP अनुरोधों को केवल HTTPS की अनुमति नहीं देता है। यदि आप HTTP अनुरोधों को सक्षम करना चाहते हैं तो इसे अपने साथ जोड़ें info.plist:

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
</dict>
— एलियन हर्स्ट
स्रोत
2
इस जवाब ने मेरे लिए काम किया। अन्य लोगों के लिए रिएक्टिव नेटिव के लिए, इस फाइल (info.plist) को भी xcode के माध्यम से संपादित किया जा सकता है: stackoverflow.com/a/38219454/1299792
— Marklar
86
Android के बारे में क्या? मैं Android में भी इसी मुद्दे का सामना कर रहा हूं।
— विजय शर्मा
16
बिल्कुल सही। किसी के पास Android के लिए जवाब है?
— Zach Cook
1
जब मैं ios / build / info.plist और run पर डालता हूं: प्रतिक्रिया-देशी रन-ios ios / build / info.plist ओवरराइट हो जाता है और अपने बदलाव छोड़ देता हूं तो मुझे क्या करना चाहिए?
— जॉर्ज वांडर सैन्टाना उरेना
1
@ JorgeWanderSantanaUreña संशोधित करें [your_project_folder_name] / ios / [your_project_folder_name] / Inh fo.plist
— kgosse
58

Http के लिए सभी डोमेन को अनुमति देने के लिए अनुशंसित नहीं है। केवल आवश्यक डोमेन के लिए एक अपवाद बनाएं।

स्रोत: iOS 9 और OSX 10.11 में ऐप ट्रांसपोर्ट सुरक्षा अपवाद कॉन्फ़िगर करना

अपने ऐप के info.plist फ़ाइल में निम्न जोड़ें:

<key>NSAppTransportSecurity</key>
<dict>
  <key>NSExceptionDomains</key>
  <dict>
    <key>yourserver.com</key>
    <dict>
      <!--Include to allow subdomains-->
      <key>NSIncludesSubdomains</key>
      <true/>
      <!--Include to allow HTTP requests-->
      <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
      <true/>
      <!--Include to specify minimum TLS version-->
      <key>NSTemporaryExceptionMinimumTLSVersion</key>
      <string>TLSv1.1</string>
    </dict>
  </dict>
</dict>
— लवी एविग्डोर
स्रोत
27
Android के बारे में क्या?
— एरिसैलेक्सिस
3
मेरे रिएक्टिव नेटिव ऐप में कई डाइरेक्टरीज़ में एक से अधिक जानकारी होने लगती है। कोई भी विचार किस फ़ोल्डर में बदलने के लिए सही फ़ाइल है?
— मार्कर फेयर
2
@Marklar [your_project_folder_name] / ios / [your_project_folder_name] /Info.plist
— Stich
अगर मैं यहां अपनी लोकलहोस्ट का उपयोग करता हूं: <key> yourserver.com </ key>, जब मैं प्रकाशित होने के लिए तैयार हूं, तो मुझे इसे बदलने की आवश्यकता होगी, सही?
— आयो ओलेरू
36

मैं localhostपते के लिए उपयोग कर रहा था , जो स्पष्ट रूप से गलत था। सर्वर के आईपी पते के साथ इसे बदलने के बाद (नेटवर्क में जो एमुलेटर है), यह पूरी तरह से काम करता है।

संपादित करें

एंड्रॉइड एमुलेटर में, विकास मशीन का पता है 10.0.2.2। यहाँ और अधिक स्पष्टीकरण

उत्पत्ति के लिए, पता है 10.0.3.2। अधिक जानकारी यहाँ

— Mahmoodvcs
स्रोत
4
धन्यवाद। संभवत: एकमात्र प्रतिक्रिया मैंने देखी है जो एंड्रॉइड के लिए काम करती है। मेरे नेटवर्क आईपी पते का उपयोग किया और यह काम करता है। जैसेhttp://<Network IP emulator connects to>:<port where API is served>/api/tasks
— ब्रैंडन बेनिफिट
1
मत भूलना "http: //" या फिर यह काम नहीं करेगा ... सोच रहा था कि यह पोस्टमैन पर क्यों काम करेगा लेकिन
— भ्रूण के
@Mahmoodvcs आपका जवाब मुझे बहुत मदद करता है, बहुत बहुत धन्यवाद, मैं एंड्रॉइड एमुलेटर का उपयोग कर रहा हूं।
— पेना पिंटादा
14

हमारे लिए यह इसलिए था क्योंकि हम एक फाइल अपलोड कर रहे थे और आरएन फाइलपिकर ने उचित माइम टाइप नहीं दिया था। इसने हमें केवल 'छवि' टाइप के रूप में दिया। हमें भ्रूण को काम करने के लिए इसे 'छवि / jpg' में बदलने की आवश्यकता थी।

form.append(uploadFileName, {
  uri : localImage.full,
  type: 'image/jpeg',
  name: uploadFileName
 })
— NickJ
स्रोत
@JohhanSantana आप शायद कच्ची छवि के आंकड़ों को देख सकते हैं और इसे शुरू से ही प्राप्त कर सकते हैं, लेकिन प्रतिक्रिया मूल निवासी सिर्फ मेरे लिए 'छवि' वापस आया।
— निक जेएन
10

प्रतिक्रियात्मक मूल दस्तावेज़ इसके लिए उत्तर देता है।

Apple ने निहित क्लीटेक्स HTTP संसाधन लोडिंग को अवरुद्ध कर दिया है। इसलिए हमें अपनी परियोजना की Info.plist (या समतुल्य) फ़ाइल को जोड़ने की आवश्यकता है।

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSExceptionDomains</key>
    <dict>
        <key>localhost</key>
        <dict>
            <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
            <true/>
        </dict>
    </dict>
</dict>

प्रतिक्रियाशील दस्तावेज़ -> मौजूदा ऐप्स के साथ एकीकरण -> अपने एकीकरण का परीक्षण करें -> ऐप परिवहन सुरक्षा अपवाद जोड़ें

— सागर
स्रोत
9

समस्या सर्वर कॉन्फ़िगरेशन में हो सकती है।

Android 7.0 में यहां वर्णित बग है । विक्की चिजवानी द्वारा प्रस्तावित समाधान:

अण्डाकार वक्र का उपयोग करने के लिए अपने सर्वर को कॉन्फ़िगर करें Prime256v1। उदाहरण के लिए, Nginx 1.10 में आप इसे ssl_ecdh_curve prime256v1 सेट करके करते हैं;

— दिमित्री मकासकोव
स्रोत
7

मुझे एंड्रॉइड पर एक ही मुद्दा मिला लेकिन मैं इसके लिए एक समाधान खोजने में कामयाब रहा। डिफ़ॉल्ट रूप से एपीआई स्तर 28 के बाद से एंड्रॉइड क्लियरटेक्स ट्रैफिक (गैर- https- अनुरोध) को रोक रहा है। हालाँकि, प्रतिक्रिया-मूल में डीबग संस्करण ( android/app/src/debug/res/xml/react_native_config.xml) के लिए एक नेटवर्क-सुरक्षा-कॉन्फ़िगरेशन जोड़ता है जो कुछ डोमेन (लोकलहोस्ट, और AVD / Genymotion के लिए होस्ट आईपी) को परिभाषित करता है, जिसे देव मोड में एसएसएल के बिना उपयोग किया जा सकता है। Http अनुरोधों की अनुमति देने के लिए आप अपना डोमेन वहां जोड़ सकते हैं।

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
  <domain-config cleartextTrafficPermitted="true">
    <domain includeSubdomains="false">localhost</domain>
    <domain includeSubdomains="false">10.0.2.2</domain>
    <domain includeSubdomains="false">10.0.3.2</domain>
    <domain includeSubdomains="true">dev.local</domain>
  </domain-config>
</network-security-config>
— जोहान्स स्पोह्र
स्रोत
यह मेरे लिए देशी 0.59 और लक्ष्य sdk 28 :) के साथ काम करता था
— उसी मधुराशन
7

एंड्रॉइड 9 पर मुझे "http" की वजह से एक ही मुद्दा मिला और केवल एंड्रॉइड को जोड़कर समस्या हल हुई : AndroidManifest.xml में CleartextTraffic = "true" का उपयोग करता है 

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
<application
  android:usesCleartextTraffic="true"
 .......>
 .......
</application>

— kautikmistry
स्रोत
2
धन्यवाद, यह मेरे लिए भी काम किया। ऐसा इसलिए होता है क्योंकि API 28 पर डिफ़ॉल्ट रूप से एंड्रॉइड HTTP का समर्थन नहीं कर रहा है।
— गुई हर्ज़ोग
5

मैं एंड्रॉइड एमुलेटर पर एक ही मुद्दे पर आया था, जहां मैंने एक वैध प्रमाण पत्र के साथ बाहरी HTTPS URL तक पहुंचने का प्रयास किया था। लेकिन प्रतिक्रिया-मूल में उस URL को लाना विफल रहा

'fetch error:', { [TypeError: Network request failed]
sourceURL: 'http://10.0.2.2:8081/index.delta?platform=android&dev=true&minify=false' }

1) लॉग में सटीक त्रुटि का पता लगाने के लिए, मैंने पहली बार ऐप पर Cmd + M का उपयोग करके 'डीबग जेएस रिमोटली' को सक्षम किया।

2) रिपोर्ट की गई त्रुटि थी

java.security.cert.CertPathValidatorException: Trust anchor for certification path not found.

3) मैंने इस विधि का उपयोग करके URL का वैध प्रमाणपत्र जोड़ा -> STEP 2

http://lpains.net/articles/2018/install-root-ca-in-android/

यह प्रमाणपत्र उपयोगकर्ता टैब में जोड़ा जाता है।

4) विशेषता जोड़ें android:networkSecurityConfig AndroidManifest.xml विशेषता

कोई नेटवर्क सुरक्षा कॉन्फ़िगरेशन फ़ाइल जोड़ें res/xml/network_security_config.xml:

<network-security-config>
    <base-config>
        <trust-anchors>
            <certificates src="user"/>
            <certificates src="system"/>
        </trust-anchors>
    </base-config>
</network-security-config>

यह काम करना चाहिए और आपको एक अपेक्षित प्रतिक्रिया देना चाहिए।

— henryoats
स्रोत
मुझे काम करने के लिए बस स्टेप 4 करने की जरूरत थी। धन्यवाद!
— ब्रूनो सेरानो
4

मुझे Android के लिए यह समस्या आ रही थी-

URL- लोकलहोस्ट / AndorToken.json - काम नहीं किया :(

URL- 10.106.105.103/authToken.json - काम नहीं किया :(

URL- http : //10.106.105.103/authToken.json : - काम किया :): डी

नोट- मशीन को खोजने के लिए ifconfigलिनक्स या ipconfigविंडोज पर उपयोग करें

— वरुण कुमार
स्रोत
4

Android उपयोगकर्ता के लिए:

  1. बदलें localhostरों आपके कंप्यूटर, उदाहरण के बजाय, क्योंकि जब आप किसी Android डिवाइस पर परियोजना चलाने के लिए, स्थानीय होस्ट एंड्रॉयड डिवाइस की ओर इशारा करते है एक लैन आईपी पते: परिवर्तन http://localostकरने के लिएhttp://192.168.1.123

  2. यदि आपका अनुरोध URL HTTPS है और आपका एंड्रॉइड डिवाइस एक प्रॉक्सी के तहत है, तो मान लें कि आपने अपने Android डिवाइस में User-Add CA (जैसे burp Suite का CA या चार्ल्स का CA) स्थापित किया है, सुनिश्चित करें कि आपका Android संस्करण Nougat (7.0) से नीचे है , क्योंकि : एंड्रॉइड नौगट में विश्वसनीय प्रमाणपत्र अधिकारियों को परिवर्तन


    सभी एप्लिकेशन डेटा का उपयोगकर्ता-वर्धित CA सुरक्षा Android एप्लिकेशन सैंडबॉक्स का एक प्रमुख लक्ष्य है। Android Nougat यह बदलता है कि उपयोगकर्ता और प्रशासित-प्रदत्त CA के साथ अनुप्रयोग कैसे सहभागिता करते हैं। डिफ़ॉल्ट रूप से, एपीआई स्तर 24 को लक्षित करने वाले ऐप्स- डिज़ाइन द्वारा ऐसे सीए का सम्मान नहीं करेंगे, जब तक कि ऐप स्पष्ट रूप से ऑप्‍ट न हो जाए। यह सुरक्षित-बाय-डिफ़ॉल्ट सेटिंग एप्लिकेशन अटैक सतह को कम करती है और नेटवर्क और फ़ाइल-आधारित एप्लिकेशन डेटा के लगातार हैंडलिंग को प्रोत्साहित करती है।

— Fangxing
स्रोत
3

Android के लिए, आप AndroidManifest.xml में अनुमति जोड़ने से चूक गए होंगे। निम्नलिखित अनुमति को जोड़ने की आवश्यकता है।

<uses-permission android:name="android.permission.INTERNET" />
— शाश्वत
स्रोत
मेरे पास पहले से ही है कि भले ही मुझे वह त्रुटि मिल रही है, क्या कोई अन्य समाधान है?
— मसूद_मोनी
@masud_moni आपको समस्या को ठीक करने का तरीका मिल गया है? im अभी भी एक ही समस्या है
— राफेल रोटेरियो
@ राफेलरोटिरोती हां मैंने उस मुद्दे को हल किया, लेकिन हालांकि यह थोड़ी देर हो गई है, यह याद रखना कठिन है, अगर आपने अनुमति का उपयोग किया है और अभी भी समस्याओं का सामना कर रहे हैं, तो कृपया विवरण साझा करें। मैं मदद करने के लिए अपनी पूरी कोशिश करूँगा, और आपके पास दूसरों को भी इसे देखने के लिए होगा
— masud_moni
@masud_moni आपको धन्यवाद, मैंने तय किया है कि ifconfig कमांड चलाने के बाद दिए गए आईपी का उपयोग करने में समस्या है। AVD एक वर्चुअल डिवाइस बनाता है, इसलिए वर्चुअल मशीन की तुलना में उसी सिद्धांत का उपयोग किया जाता है जो मेरे डिवाइस में 127.0.0.1 में होस्ट नहीं है। इसलिए मैं 192.168.xx IP का उपयोग करता हूं और सब कुछ ठीक काम करता है
— राफेल रोटेरियो
2

मुझे भी ऐसी ही समस्या है। मेरे मामले में लोकलहोस्ट के अनुरोध काम कर रहे थे और अचानक बंद हो गए। यह पता चला कि समस्या यह थी कि मैं अपने एंड्रॉइड फोन पर अपनी वाईफाई बंद कर रहा था।

— Ивайло Янков
स्रोत
2

यह मेरे लिए काम करता है, एंड्रॉइड एक विशेष प्रकार के आईपी पते 10.0.2.2 का उपयोग करता है फिर पोर्ट नंबर

import { Platform } from 'react-native';

export const baseUrl = Platform.OS === 'android' ?
    'http://10.0.2.2:3000/'
: 
'http://localhost:3000/';
— चो चो
स्रोत
1

यदि आप REST एपीआई के लिए डॉकटर का उपयोग करते हैं, तो मेरे लिए एक कार्यशील मामला होस्टनाम को बदलने के लिए था: http://demo.test/apiमशीन आईपी पते के साथ http://x.x.x.x/api:। अपने वायरलेस नेटवर्क पर आपके पास क्या ipv4 है, इसकी जाँच से आप IP प्राप्त कर सकते हैं। आपके पास फ़ोन पर wifi भी होना चाहिए।

— क्रिएकुन सिप्रियन
स्रोत
1

आपको API लाने के लिए त्रुटि मामले को संभालना चाहिए।

उदाहरण के लिए:

fetch(authURl,{ method: 'GET'})
.then((response) => {      
  const statusCode = response.status;
  console.warn('status Code',statusCode);
  if(statusCode==200){
    //success code
  }else{
    //handle other error code
  }      
},(err) => {
  console.warn('error',err)
})
.catch((error) => {
  console.error(error);
  return error;
});
— user3374790
स्रोत
0

  1. android:usesCleartextTraffic="true"AndroidManifest.xml में लाइन जोड़ें ।

  2. अपने Android फ़ोल्डर से सभी डीबग फ़ोल्डर हटाएं।

— devkrkanhaiya
स्रोत
0

आप इसका उपयोग करके इसे संभाल सकते हैं:

catch((error) => {
      this.setState({
        typing_animation_button: false,
      });
      console.log(error);
      if ('Timeout' || 'Network request failed') {
        toast_show = true;
        toast_type = 'error';
        toast_text = 'Network failure';
      }
      this.setState({
        disable_button: false,
      });
    });
— तल्हा फ़ियाज़
स्रोत
-1

बस आपके पास लाए हैं चूत में बदलाव…।

fetch('http://facebook.github.io/react-native/movies.json')
    .then((response) => response.json())
    .then((responseJson) => {
        /*return responseJson.movies; */
        alert("result:"+JSON.stringify(responseJson))
        this.setState({
            dataSource:this.state.dataSource.cloneWithRows(responseJson)
        })
     }).catch((error) => {
         console.error(error);
     });
— Lavaraju
स्रोत
-1

Android डिवाइस के लिए, अपने प्रोजेक्ट रूट फ़ोल्डर में जाएं और कमांड चलाएँ:

adb reverse tcp:[your_own_server_port] tcp:[your_own_server_port]

जैसे, adb reverse tcp:8088 tcp:8088

यह आपके भौतिक उपकरण (यानी एंड्रॉइड फोन) को आपके विकास मशीन (यानी आपके कंप्यूटर) पर चल रहे लोकलहोस्ट सर्वर को http: // localhost: [your_own_server_port] पर सुनेंगे। ।

उसके बाद, आप सीधे http:localhost:[your_port] /your_apiअपनी प्रतिक्रिया-मूलक fetch() कॉल में उपयोग कर सकते हैं ।

— प्रीतम केशरी नहाक
स्रोत
-1

Android के लिए, Android में जोड़ें: AndroidSifif.xml में टैग लगाने के लिए networkSecurityConfig = "@ xml / network_security_config", इस तरह:

    <?xml version="1.0" encoding="utf-8"?>
    <manifest ... >
        <application android:networkSecurityConfig="@xml/network_security_config"
                        ... >
            ...
        </application>
    </manifest>

network_security_config.xml फ़ाइल सामग्री:

<?xml version='1.0' encoding='utf-8'?>
<network-security-config>
<debug-overrides>
    <trust-anchors>
        <!-- Trust user added CAs while debuggable only -->
        <certificates src="user" />
    </trust-anchors>
</debug-overrides>

<!-- let application to use http request -->
<base-config cleartextTrafficPermitted="true" />
</network-security-config>
— xyz
स्रोत
क्या आप विस्तार से बता सकते हैं, और विवरण में बता सकते हैं? मैं बस उत्सुक हूं कि यह कैसे काम करता है?
— गणेशधाममुख
टिप्पणी को संशोधित किया है, आशा है कि मदद मिलेगी
— xyz
-5

उदाहरण:

return fetch('http://<your ip>')
  .then((response) => response.json())
  .then((responseJson) => {
    console.log(responseJson)
  })
  .catch((error) => {
    console.error(error);
  });
— अखिला एंटनी
स्रोत
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.