React Native: request api on http server not work-CodePudding

I tried to fetch api from laravel server in my react native app

I launched laravel servers with php artisan serve --host=0.0.0.0 so i can access to my api route with http://myIp:8000/myProject/api/; in this project i have route

Route::get('/test', function(){
    return response()->json([
        'data' => 'test'
    ]);
});

I already tested http://myIp:8000/myProject/api/test in my mobiles device's browser and i got the json data;

So in my react native i installed axios configured like this:

axios.create({
    baseUrl: base_url_api,
    headers: {
        Accept: 'application/json',
        'Content-type': 'application/json'
    }
})

And i fetch the api like this axios.get("http://myIp:8000/myProject/api/test") but it throw error Error Network;

So i tried with axios.get("https://jsonplaceholder.typicode.com/todos/1") and i got the json data from jsonplaceholder;

I already set android:usesCleartextTraffic="true" on my AndroidManifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
  package="com.test">

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

    <application
      android:name=".MainApplication"
      android:label="@string/app_name"
      android:icon="@mipmap/ic_launcher"
      android:roundIcon="@mipmap/ic_launcher_round"
      android:allowBackup="false"
      android:theme="@style/AppTheme"
      android:usesCleartextTraffic="true"
      >
      <activity
        android:name=".MainActivity"
        android:label="@string/app_name"
        android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode"
        android:launchMode="singleTask"
        android:windowSoftInputMode="adjustResize">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
      </activity>
    </application>
</manifest>

but it not work;

here my package.json dependecies

"dependencies": {
    "axios": "^0.21.4",
    "react": "17.0.2",
    "react-native": "0.65.1",
    "react-native-elements": "^3.4.2",
    "react-native-gesture-handler": "^1.10.3",
    "react-native-paper": "^4.9.2",
    "react-native-reanimated": "^2.2.2",
    "react-native-safe-area-context": "^3.3.2",
    "react-native-screens": "^3.7.2",
    "react-native-vector-icons": "^8.1.0"
  },
  "devDependencies": {
    "@babel/core": "^7.15.5",
    "@babel/runtime": "^7.15.4",
    "@react-native-community/eslint-config": "^3.0.1",
    "babel-jest": "^27.2.2",
    "eslint": "^7.32.0",
    "jest": "^27.2.2",
    "metro-react-native-babel-preset": "^0.66.2",
    "react-native-codegen": "^0.0.7",
    "react-test-renderer": "17.0.2"
  },

my react native cli version

react-native --version
react-native-cli: 2.0.1
react-native: 0.65.1

CodePudding user response：

I know it's stupid but I used wrong properties name for axios configuration, instead baseURL I set baseUrl

axios.create({
    baseURL: base_url_api,
    headers: {
        Accept: 'application/json',
        'Content-type': 'application/json'
    }
})

_{Posted on behalf of the question asker}