Expo@49经EAS构建后无法发起HTTP请求的问题求助

问题描述 #

• 使用axios/fetch开发的Expo应用，在Expo Go中向本地API发起GET请求一切正常
• 通过eas build --profile preview -p android构建APK后，应用完全未发送请求（已通过代理确认）
• 切换为fetch后问题依旧，且catch无法捕获具体错误信息
• 该HTTP GET请求在浏览器、Node环境、Expo 47构建的旧应用中均可正常工作

相关代码 #

import { useEffect } from 'react';
import { StyleSheet } from 'react-native';

import EditScreenInfo from '../../components/EditScreenInfo';
import { Text, View } from '../../components/Themed';

import { helloWorld } from '../../utils/api';

const TabTwoScreen = () => {
    useEffect(() => {
        // helloWorld()
        //  .then(({ data }) => alert(data))
        //  .catch(() => alert("An unkown error has occured"))

        fetch('http://192.168.1.27:1700/hello-world')
            .then(data => data.text())
            .then(data => alert(data))
            .catch(() => alert("An unknown error has occured"));
    });

    return (
        <View style={styles.container}>
            <Text style={styles.title}>Tab Two</Text>
            <View style={styles.separator} lightColor="#eee" darkColor="rgba(255,255,255,0.1)" />
            <EditScreenInfo path="app/(tabs)/two.tsx" />
        </View>
    );
}

export default TabTwoScreen;

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    },
    title: {
        fontSize: 20,
        fontWeight: 'bold',
    },
    separator: {
        marginVertical: 30,
        height: 1,
        width: '80%',
    },
});

eas.json配置 #

{
  "cli": {
    "version": ">= 5.9.3"
  },
  "build": {
    "development": {
      "developmentClient": true,
      "distribution": "internal"
    },
    "preview": {
      "distribution": "internal",
      "android": {
        "buildType": "apk"
      }
    },
    "production": {}
  },
  "submit": {
    "production": {}
  }
}

核心原因 #

Expo 49开始默认遵循Android 9+的安全策略，禁止明文HTTP请求（即http://开头的地址），而Expo Go作为开发环境默认放宽了该限制，所以会出现开发正常、构建后请求失败的情况。

具体解决步骤 #

1. 配置Android网络安全策略
   在app.json或app.config.js的android字段中添加networkSecurityConfig，允许目标IP的明文请求：

   "android": {
     // 保留原有配置
     "networkSecurityConfig": {
       "domainConfigs": [
         {
           "domain": "192.168.1.27",
           "cleartextTrafficPermitted": true
         }
       ]
     }
   }
   

   如果需要允许所有本地IP的明文请求（方便开发调试），可以改用基础配置：

   "android": {
     "networkSecurityConfig": {
       "baseConfig": {
         "cleartextTrafficPermitted": true
       }
     }
   }
   

2. 修复useEffect无限触发问题
   当前useEffect没有依赖数组，会导致组件每次渲染都执行请求，虽然不是请求不发送的直接原因，但建议添加空数组让请求只执行一次：

   useEffect(() => {
     // 请求代码
   }, []);
   

3. 捕获详细错误信息
   修改catch块打印完整错误，方便后续排查其他潜在问题：

   .catch((error) => {
     console.error('请求错误详情:', error);
     alert(`错误信息: ${error.message}`);
   });
   

4. 重新构建应用
   修改配置后，重新执行构建命令：

   eas build --profile preview -p android
   

内容的提问来源于stack exchange，提问作者Ezequiel Dev