Question 339951 in React native Question posted in
The official React Native documentation can be found here.

React native – AxiosError: Network Error — ReactNative with Expo

I’m developping an expo go application with axios and i’m trying to connect to an api that i’m currently building but i’m getting this [AxiorError: Network Error].
I’m new in React Native development but i already work with mobile development, my url is valid ( i also tested using the browser of the emulator so it is hitting the api by the emulator network and getting the proper results)

I’m using android

This is my code:

import axios from "axios";

const api = axios.create({
    baseURL: 'http://192.xxx.x.x:81/api'
});

export default api;

than i have this method:

import api from "./Api";
    
export async function searchMenu() {
    
    const response = await api.get('/menu');                

    return response.data;
    
}

and i call it in

import { searchMenu } from "@/services/MenuApi"

export default function Home(){   
console.log(searchMenu())
  }

EDIT:
This is the result when i call:

searchMenu().then(console.log).catch((err) => console.log(err.response?.data, err.toJSON()))

LOG  undefined {"code": "ERR_NETWORK", "columnNumber": undefined, "config": {"adapter": [Function xhrAdapter], "baseURL": "http://192.168.0.3:81/api", "data": undefined, "env": {"Blob": [Function Blob], "FormData": [Function FormData]}, "headers": {"Accept": "application/json, text/plain, */*"}, "maxBodyLength": -1, "maxContentLength": -1, "method": "get", "timeout": 0, "transformRequest": [[Function transformRequest]], "transformResponse": [[Function transformResponse]], "transitional": {"clarifyTimeoutError": false, "forcedJSONParsing": true, "silentJSONParsing": true}, "url": "/menu", "validateStatus": [Function validateStatus], "xsrfCookieName": "XSRF-TOKEN", "xsrfHeaderName": "X-XSRF-TOKEN"}, "description": undefined, "fileName": undefined, "lineNumber": undefined, "message": "Network Error", "name": "AxiosError", "number": undefined, "stack": "AxiosError: Network Error
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Figure it out, the problem was in my API:

    If anyone is using an ASP.NET API with .net6+ and having this problem, in your Program.cs file comment the line:

    app.UseHttpsRedirection();

    I still dont know why the url worked in the emulator browser but no in the emulator app, but now is working


  2. 0

    I think You need to make changes in your Android manifest file to support HTTP requests, by default Android supports only HTTPS requests and I can see your baseUrl is based on HTTP only.

    Try putting usesCleartextTraffic in your application tag

    <application
    ...
    android:usesCleartextTraffic="true"
    ...
/>

    You can also try APIs with HTTPS if you have one, It will run without any changes https://192.xxx.x.x:81/api

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search