React Native：http服务器上的请求api不起作用答案

【问题标题】：React Native: request api on http server not workReact Native：http服务器上的请求api不起作用
【发布时间】：2021-11-18 17:49:31
【问题描述】：

我尝试在我的 react native 应用中从 laravel 服务器获取 api

我用php artisan serve --host=0.0.0.0 启动了laravel 服务器，所以我可以用http://myIp:8000/myProject/api/ 访问我的api 路由；在这个项目中我有路线

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

我已经在我的移动设备浏览器中测试了http://myIp:8000/myProject/api/test，我得到了 json 数据；

所以在我的 react native 中，我安装了如下配置的 axios：

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

我像这样axios.get("http://myIp:8000/myProject/api/test") 获取api，但它抛出错误Error Network；

所以我尝试了axios.get("https://jsonplaceholder.typicode.com/todos/1")，我从 jsonplaceholder 获得了 json 数据；

我已经在我的 AndroidManifest.xml 中设置了android:usesCleartextTraffic="true"

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

但它不起作用;

这里是我的 package.json 依赖项

"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"
  },

我的 react 原生 cli 版本

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

【问题讨论】：

web.php 或 api.php 中的路径地址？
api.php，问题不是路由，而是http，当我获取https时它运行良好，但在http上它不起作用，它抛出错误网络，因为它不允许在http服务器上获取
我为基本 url 配置使用了错误的属性名称，

标签： laravel react-native axios

【解决方案1】：

我知道这很愚蠢，但我为 axios 配置使用了错误的属性名称，而是baseURL 我设置了baseUrl

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

_{代表提问者发帖}

【讨论】：