Expo Go+Axios请求自建API遇AxiosError: Network Error求助（Android）

问题场景 #

用Expo Go开发React Native应用，Android设备上通过Axios请求本地搭建的API时触发AxiosError: Network Error。模拟器浏览器能正常访问该API，但代码请求失败。

涉及代码 #

API实例配置 #

import axios from "axios";

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

export default api;

请求方法实现 #

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

组件中调用 #

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

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

调试输出 #

执行以下调试代码后：

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

解决步骤 #

1. 确认API监听地址
   确保本地API服务不是仅监听127.0.0.1，改为监听0.0.0.0或你的局域网IP（比如192.168.0.3），否则模拟器无法通过局域网IP访问服务。

2. 检查设备网络环境
   确保运行Expo Go的Android设备（或模拟器）和部署API的电脑处于同一Wi-Fi网络，且API地址中的IP与电脑当前局域网IP一致。

3. 验证网络权限
   确认Expo应用已获取网络权限，Expo默认会在AndroidManifest.xml中添加INTERNET权限，若手动修改过配置，需检查是否存在以下代码：

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

4. 调整API的CORS配置
   如果API启用了跨域资源共享（CORS），需配置允许Expo应用的请求来源，测试阶段可临时设置允许所有来源（Access-Control-Allow-Origin: *）。

5. 关闭电脑防火墙
   电脑防火墙可能拦截模拟器的网络请求，临时关闭防火墙后测试是否能正常请求API。

6. 使用Expo代理（可选）
   若上述方法无效，可在app.json中配置Expo代理：

   {
     "expo": {
       "name": "YourAppName",
       "slug": "your-app-slug",
       "proxy": {
         "scheme": "http",
         "host": "192.168.0.3",
         "port": 81,
         "path": "/api"
       }
     }
   }
   

   之后将Axios的baseURL改为http://localhost:8081/api（Expo默认代理端口为8081）。

内容的提问来源于stack exchange，提问作者Thiago Schmitz