javascript - not - how to get an instagram client id

La solicitud de red React fetch() falló

Question

Cuando creo un nuevo proyecto usando react-native init (RN versión 0.29.1) y pongo una búsqueda en el método de renderizado en la API pública de la película de demostración de Facebook, arroja una Network Request Failed . Hay un seguimiento de pila muy inútil y no puedo depurar solicitudes de red en la consola de Chrome. Aquí está la búsqueda que estoy enviando:

fetch(''http://facebook.github.io/react-native/movies.json'')
      .then((response) => response.json())
      .then((responseJson) => {
        return responseJson.movies;
      })
      .catch((error) => {
        console.error(error);
      });

Answer 1

Debe manejar el caso de error en .then para buscar API.

Por ejemplo:

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

Answer 2

Ejemplo:

return fetch(''http://<your ip>'')
  .then((response) => response.json())
  .then((responseJson) => {
    console.log(responseJson)
  })
  .catch((error) => {
    console.error(error);
  });

Answer 3

El problema aquí es que iOS no permite solicitudes HTTP de forma predeterminada, solo HTTPS. Si desea habilitar las solicitudes HTTP, agregue esto a su info.plist :

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
</dict>

Answer 4

El problema puede estar en la configuración del servidor.

Android 7.0 tiene un error descrito aquí . Solución propuesta por Vicky Chijwani:

Configure su servidor para usar la curva elíptica prime256v1. Por ejemplo, en Nginx 1.10, hace esto configurando ssl_ecdh_curve prime256v1;

Answer 5

Encontré el mismo problema en Android Emulator, donde intenté acceder a una URL HTTPS externa con un certificado válido. Pero no se pudo recuperar esa URL en react-native

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

1) Para averiguar el error exacto en los registros, primero habilité ''Debug JS Remotely'' usando Cmd + M en la aplicación

2) El error reportado fue

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

3) Agregué el certificado válido de la URL usando este método -> PASO 2

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

Este certificado se agrega a la pestaña Usuario.

4) Agregue el atributo android:networkSecurityConfig a AndroidManifest.xml

Agregue un archivo de configuración de seguridad de red 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>

Esto debería funcionar y darle una respuesta esperada.

Answer 6

Estaba teniendo este problema para Android

URL- localhost / authToken.json - no funcionó :(

URL- 10.106.105.103/authToken.json - no funcionó :(

URL- http://10.106.105.103/authToken.json - trabajado :): D

Nota: use ifconfig en Linux o ipconfig en Windows para encontrar la máquina IpAddress

Answer 7

Estaba usando localhost para la dirección, que obviamente estaba mal. Después de reemplazarlo con la dirección IP del servidor (en la red que es el emulador), funcionó perfectamente.

Editar

En Android Emulator, la dirección de la máquina de desarrollo es 10.0.2.2 . Más explicaciones here

Para Genymotion, la dirección es 10.0.3.2 . Más información here

Answer 8

Esto funcionó para mí, Android usa un tipo especial de dirección IP 10.0.2.2 y luego el número de puerto

import { Platform } from ''react-native'';

export const baseUrl = Platform.OS === ''android'' ?
    ''http://10.0.2.2:3000/''
: 
''http://localhost:3000/'';

Answer 9

No se recomienda permitir todos los dominios para http. Haga una excepción solo para los dominios necesarios.

Fuente: Configuración de excepciones de seguridad de transporte de aplicaciones en iOS 9 y OSX 10.11

Agregue lo siguiente al archivo info.plist de su aplicación:

<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>

Answer 10

Para Android, es posible que no haya agregado el permiso en AndroidManifest.xml. Necesita agregar el siguiente permiso.

<uses-permission android:name="android.permission.INTERNET" /> 

Answer 11

Para dispositivos Android, vaya a la carpeta raíz del proyecto y ejecute el comando:

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

por ejemplo, adb reverse tcp:8088 tcp:8088

Esto hará que su dispositivo físico (es decir, un teléfono Android) escuche el servidor localhost que se ejecuta en su máquina de desarrollo (es decir, su computadora) en la dirección http://localhost:[your_own_server_port] .

Después de eso, puede usar directamente http:localhost:[your_port] /your_api en su http:localhost:[your_port] /your_api reaccionar nativa fetch( ).

Answer 12

Para nosotros fue porque estábamos cargando un archivo y el RN filePicker no dio el tipo mime adecuado. Simplemente nos dio ''imagen'' como tipo. Necesitábamos cambiarlo a ''image / jpg'' para que la búsqueda funcionara.

form.append(uploadFileName, {
  uri : localImage.full,
  type: ''image/jpeg'',
  name: uploadFileName
 })

Answer 13

React Native Docs da la respuesta para esto.

Apple ha bloqueado la carga implícita de recursos HTTP de texto en claro. Por lo tanto, debemos agregar el siguiente archivo Info.plist (o equivalente) de nuestro proyecto.

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

Reaccionar documentos nativos -> Integración con aplicaciones existentes -> Probar su integración -> Agregar excepción de seguridad de transporte de aplicaciones

Answer 14

Si usa Docker para la API REST, un caso de trabajo para mí fue reemplazar el nombre de host: http://demo.test/api con la dirección IP de la máquina: http://xxxx/api . Puede obtener la IP comprobando qué ipv4 tiene en su red inalámbrica. También debe tener el wifi del teléfono encendido.

Answer 15

Solo tienes cambios en Fetch ...

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

Answer 16

Tengo un problema similar En mi caso, las solicitudes a localhost funcionaban y de repente se detuvieron. Resultó que el problema era que estaba apagando mi wifi en mi teléfono Android.

Answer 17

Tuve el mismo problema en Android, pero logré encontrar una solución. Android está bloqueando el tráfico de texto sin formato (solicitudes que no son https) desde el nivel 28 de API de forma predeterminada. Sin embargo, react-native agrega una configuración de seguridad de red a la versión de depuración ( android/app/src/debug/res/xml/react_native_config.xml ) que define algunos dominios (localhost y las IP de host para AVD / Genymotion), que se puede usar sin SSL en modo dev. Puede agregar su dominio allí para permitir solicitudes 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>

Answer 18

Para usuarios de Android:

1. Reemplace localhost s por una dirección IP de Lan porque cuando ejecuta el proyecto en un dispositivo Android, localhost apunta al dispositivo Android, en lugar de su computadora, por ejemplo: cambie http://localost a http://192.168.1.123

2. Si su URL de solicitud es HTTPS y su dispositivo Android está bajo un proxy, suponga que ha instalado una CA agregada por el usuario (como la CA de burp suite o la CA de Charles) en su dispositivo Android, asegúrese de que su versión de Android esté debajo de Nougat (7.0) , porque : Cambios en las autoridades de certificación de confianza en Android Nougat
   

   CA agregadas por el usuario
   La protección de todos los datos de la aplicación es un objetivo clave del entorno limitado de aplicaciones de Android. Android Nougat cambia la forma en que las aplicaciones interactúan con las CA proporcionadas por el usuario y el administrador. De manera predeterminada, las aplicaciones que se dirigen al nivel 24 de API, por diseño, no honrarán tales CA a menos que la aplicación explícitamente opte por esta opción.