javascript - network - Reaccionar solicitud de publicación nativa a través de Fetch lanza solicitud de red fallida

react native ios http

Question

He encontrado el siguiente error. En este momento estoy desarrollando una aplicación para Android con React Native, por lo tanto, estoy planeando usar fetch para hacer una solicitud posterior para mí.

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

La aplicación ahora arroja un error:

TypeError: solicitud de red fallida

Cuando cambio el código a una Solicitud GET funciona bien, en el navegador con window.alert () como devolución, y la extensión de Chrome Postman devuelve los datos correctamente.

Answer 1

Desarrollar con el sistema operativo Windows / PHP incorporado / react-native Android en el dispositivo:

• verificar la dirección IP local del servidor ( ipconfig ), p. ej. 172.16.0.10
• en la fetch react- fetch usa esta URL y el puerto correcto ( fetch(''http://172.16.0.10:8000/api/foo) )
• ejecuta el servidor PHP incorporado con esta IP específica en lugar del localhost: php -S 172.16.0.10:8000 ...
• desactivar el firewall de Windows para las redes privadas

Eso solucionó el problema de conexión entre el teléfono Android y el servidor local para mí.

Answer 2

El error de React Native es bastante inútil, por lo que primero debe obtener el error subyacente real. La forma más directa es escribir un pequeño programa nativo que simplemente realice la misma consulta usando HttpsURLConnection .

Para mí, el error real fue java.security.cert.CertPathValidatorException: Trust anchor for certification path not found. que tiene una solución bien conocida: https://developer.android.com/training/articles/security-ssl.html#MissingCa

Es muy probable que también sea su caso, dado que los navegadores y el cartero no tienen problemas con la solicitud. Para verificarlo, ejecute openssl s_client -connect XXreachable-domainXX.de:443 -showcerts . Si hay errores de certificado, arrégleselos primero, podría ahorrarte tiempo escribiendo el programa nativo.

Editar: en realidad, la forma más sencilla de ver todos los errores subyacentes de Android para reaccionar es simplemente ejecutar ''adb logcat'' en la terminal

Answer 3

Si ha tenido este error y está seguro de que todo funciona bien y está ejecutando un emulador, simplemente cierre el emulador y vuelva a encenderlo.

Debería funcionar ahora.

Esto generalmente ocurre después de que haya hibernado su sistema por un tiempo

Answer 4

Si se encuentra con este problema en el emulador, asegúrese de probarlo también en el dispositivo. Probablemente no esté sucediendo allí.

Solo para que sepa que no hay nada de qué preocuparse si puede evitarlo.

Answer 5

Tuve este problema en Android debido a un certificado caducado. El mensaje de error que tuve fue 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) .

Pude confirmar esto usando digicert.com .

Lamentablemente tuve que profundizar un poco en el código React Native y depurar el código XHR en el paquete (index.android.bundle) para encontrar el mensaje de error y la URL en cuestión, porque estaba en algunos de mis códigos de registro. , que obviamente tampoco me conecté a la consola. :)

Me ayudó github.com/facebook/react-native/issues/… .

Answer 6

Tuve un problema importante haciendo lo mismo en el emulador de Android. En iOS aprobar el dominio en el info.plist era necesario. Para que quede claro, estaba intentando iniciar sesión en mi API alojada web .NET.

La solución fue asegurarse de que los datos de la publicación estuvieran parametrizados. (Estoy bastante seguro de que es una palabra)

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

Answer 7

Ver dos casos abajo

1. Punto final incorrecto
2. Conexión a Internet: dispositivo real, dispositivo virtual

Ha comido 2 horas con la segunda razón.