AxiosError: Network Error

Question

estou usando react native e ao tentar consumir uma api utilizando emulador de android vi que o ip a ser usando em vez de localhosto seria esse abaixo:

import axios from 'axios';

const api = axios.create({

  baseURL:'http://10.0.2.2:3000'

})

export { api };

função para consumir a api

  async function fetchProd() {

    try {
      setIsLoading(true);
      const response = await api.get('/maquinas');
      console.log(response)
      setMaquinas(response.data);
    } catch(error) {
      console.log(error)
      const isAppError = error instanceof AppError;
      const title = isAppError ? error.message : 'Não foi possível carregar as máquinas.';
      toast.show({
        title,
        placement: 'top',
        bgColor: 'red.500'
      });
    }finally{
      setIsLoading(false)
    }
  }

o que me retorna na log : "[AxiosError: Network Error]" e para criar uma api fake estou usando JSON-server.

esse mesmo código a 2 dias funcionava normal kk, alguem pode ajudar?

Por favor, esclareça seu problema ou forneça detalhes adicionais a fim de destacar exatamente o que você precisa. Da forma como está escrito atualmente é difícil dizer com exatidão o que você está perguntando. — Comunidade
– Comunidade Bot, Commented 1/06/2023 às 22:20

Teuuz1994 · Accepted Answer · 2023-06-12 03:43:41Z

Bem, de acordo com o pouco de informações fornecidas, vou assumir que você está executando a aplicação com o expo de acordo com o comentário citado e que está usando o emulador do android sem qualquer alteração vigente.

Proposta de solução:

Não basta somente colocar um IP qualquer no axios para o react-native consumir, na verdade o que você precisa é realizar um proxy reverso do seu IP local. Para isso existem 2 maneiras: com o cabo USB ou pelo wifi.

Método via USB (recomendado):

Para configurar o proxy reverso você deve ter instalado e configurado o adb (Android Debug Bridge) em sua máquina, mas aqui vou focar na solução do problema já com esta ferramenta instalada. Tendo isso em mente, você deve seguir alguns passos para concluir esta tarefa:

Primeiro vamos reiniciar o servidor adb para garantirmos que tudo irá funcionar corretamente, para isso rode o comando adb kill-server e quando finalizado rode o comando adb start-server;
Após a reinicialização do servidor, conecte o seu telefone com sua máquina através do USB lembrando que já deve estar com a depuração USB já habilitada;
No mesmo terminal em que reiniciou o servidor, rode o comando adb devices, isso irá listar todos os dispositivos conectado a sua máquina, garanta que pelo menos 1 dispositivo esteja aparecendo e anote o seu nome pois será utilizado no futuro;
Tendo a certeza que o seu dispositivo está conectado e aparecendo no terminal, rode o seguinte comando adb -s {device_name} reverse tcp:{port} tcp:{port} (substitua os elementos entre chaves pelas informações que você precisa lembrando de remover as chaves Ex.: adb -s loremipsum reverse tcp:8081 tcp:8081);
Com essas configurações passadas ao seu adb a emulação do app reconhecerá o endereço que você configurou no seu arquivo de configuração do axios como o "localhost".

Método via wifi:

Para realizar esse passo você precisa encontrar o IP da sua máquina, para isso se estiver usando uma máquina com sistema Linux pode digitar o seguinte comando /sbin/ifconfig que será exibido o seu endereço de IP, caso esteja utilizando Windows basta digitar ipconfig, e por fim, se estiver utilizando o MacOS basta ir em preferências do sistema e em seguida ir em rede;
Com o app em execução abra as configurações de desenvolvimento (CTRL+M);
Com o menu aberto procure por Dev Settings em seguida Debug server host & port for device e digite seu endereço IP que resgatou no primeiro passo seguido da porta de execução Ex.: 192.10.12.1:8080;
Retorne ao menu de desenvolvimento do React Native e pressione em Reload JS e pronto o app reinicializará com o proxy via wifi sendo realizado.

Ref: https://reactnative.dev/docs/running-on-device?os=linux#method-1-using-adb-reverse-recommended-2

Renan Souza · Accepted Answer · 2023-06-01 20:57:24Z

Fala Lucas, tudo bom? Talvez o problema seja mais simples de resolver do que você imagina. No seu caso , como você não deu detalhes sobre como seu emulador está configurado e também não tem muitas informações sobre o seu AndroidManifest.xml, vou assumir que isso não foi alterado.

Nesse caso, você pode verificar se nas configuração do seu emulador o endereço para o seu localhost é esse mesmo que você mandou.

Além disso, O android pode assumir (API 28+) que o endereço 10.0.2.2 não é um domínio seguro, então para garantir que o que você quer fazer funcione, é importante que você configure esses acessos. Você pode realizar essa configuração criando um arquivo res/xml/network_security_config.xml com a seguinte configuração:

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <domain-config cleartextTrafficPermitted="true">
        <domain includeSubdomains="true">localhost</domain>
        <domain includeSubdomains="true">10.0.2.2</domain>
    </domain-config>
</network-security-config>

Em seguida, realize a importação dessa nova configuração no AndroidManifest.xml:

<application
...
...
...
android:networkSecurityConfig="@xml/network_security_config">

Espero ter ajudado de alguma forma.

Como está escrito atualmente, sua resposta não é clara. Por favor, pode editar para adicionar mais detalhes, que ajudarão outras pessoas a entender como isso resolve a pergunta feita. Você pode encontrar mais informações sobre como escrever boas respostas na Central de Ajuda. — Comunidade
– Comunidade Bot, Commented 1/06/2023 às 22:20

AxiosError: Network Error

2 Respostas 2

Você deve fazer log-in para responder a esta pergunta.

AxiosError: Network Error

2 Respostas 2

Você deve fazer log-in para responder a esta pergunta.

Relacionado