2016-01-02 29 views
25

Ho trovato il seguente errore. Attualmente sto sviluppando un'applicazione Android con React Native, quindi ho intenzione di utilizzare fetch per fare una richiesta di post per me.React Native Post Request via Fetch lancia Richiesta di rete fallita

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); 
}) 
    ; 

L'applicazione ora genera un errore:

TypeError: Network request failed

Quando cambio il codice per un get-Request E'lavorando bene, nel browser con un window.alert() come un ritorno è bello e anche l'estensione chrome Postman restituisce i dati correttamente.

+2

Se qualcuno ha questo problema su iOS, assicurati di utilizzare https non solo http. Le impostazioni predefinite servono solo per supportare https. – wuliwong

+0

Come si cambiano le impostazioni per supportare HTTP? – MadPhysicist

+0

È necessario approvare i domini in 'info.plist'. http://stackoverflow.com/questions/38418998/react-native-fetch-network-request-failed – nicholas

risposta

8

Questo errore di React Native è piuttosto inutile, quindi è necessario prima ottenere l'errore sottostante reale. Il modo più semplice è scrivere un piccolo programma nativo che esegua la stessa query usando HttpsURLConnection.

Per me l'errore effettivo era java.security.cert.CertPathValidatorException: Trust anchor for certification path not found. che ha una soluzione ben nota: https://developer.android.com/training/articles/security-ssl.html#MissingCa

Questo è abbastanza probabile che il vostro caso anche, dato che i browser e postino non hanno alcun problema con la richiesta. Per controllarlo, esegui openssl s_client -connect XXreachable-domainXX.de:443 -showcerts. Se ci sono errori di certificato, correggili prima, potrebbe risparmiare tempo a scrivere il programma nativo.

Edit: in realtà il modo più semplice per vedere tutti gli errori Android sottostanti per reagire nativa è semplicemente in esecuzione 'logcat ADB' nel terminale

11

Sviluppare con sistema operativo Windows/PHP built-in server/reagire nativo Android su dispositivi:

  • controllare l'indirizzo IP locale del server (ipconfig), ad es. 172.16.0.10
  • a reagire nativo fetch Usa questo URL e propria porta (fetch('http://172.16.0.10:8000/api/foo))
  • run PHP built-in server con questo specifico IP invece del localhost: php -S 172.16.0.10:8000 ...
  • disattivare il firewall di Windows per le reti private

Questo ha risolto il problema di connessione tra il telefono Android e il server locale.

+0

Cambiare semplicemente 'localhost' per il mio IP locale ha fatto il trucco, forse un bug che ha analizzato' localhost'? – xHocquet

0

Ho avuto un grosso problema facendo lo stesso sull'emulatore Android. Su iOS è stato necessario approvare il dominio nel file info.plist. Per essere chiari stavo tentando di accedere alla mia API web hosting .NET.

La correzione è stato quello di assicurarsi che i dati post è stato parametrizzati. (Sono abbastanza sicuro che è una parola)

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

controllare due casi muggito

  1. end-point sbagliato
  2. Connessione Internet: dispositivo reale, dispositivo virtuale

Ha mangiato 2 ore con il secondo rea figlio.

+0

Questo dovrebbe essere piuttosto un commento. Questa è ** non ** una risposta alla domanda. – GhostCat

+0

Non sono abbastanza per scrivere un commento. Quindi faccio una domanda. Scusate. –

2

Se si è verificato questo errore e si è sicuri che tutto funzioni correttamente e si sta eseguendo un emulatore, è sufficiente chiudere l'emulatore e accenderlo di nuovo.

Dovrebbe essere eseguito ora.

Questo di solito accade dopo aver ibernato il sistema per un po '

0

Se si esegue in questo problema su emulatore assicurarsi di provare anche sul dispositivo. Probabilmente non sta succedendo lì.

Solo così sai che non c'è nulla di cui preoccuparsi se si può aggirare.

0

Ho avuto questo problema su Android a causa di un certificato scaduto. Il messaggio di errore che avevo era 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).

Sono stato in grado di confermare questo utilizzando digicert.com.

Purtroppo ho dovuto scavare piuttosto in profondità nel codice React Native e eseguire il debug del codice XHR nel pacchetto (index.android.bundle) per trovare il messaggio di errore e l'URL in questione, perché era in alcuni dei miei codici di accesso, che Ovviamente non ho nemmeno loggato alla console. :)

Sono stato aiutato da this GitHub issue comment.

Problemi correlati