React Native Fetch API返回HTML错误及Android真机请求失败问题

• 在React Native（Expo）项目中使用Fetch请求API时，响应返回包含“需要启用JavaScript才能运行此应用”提示的HTML代码
• 安卓真机上运行应用时，API请求完全失败，出现网络错误

相关配置与代码 #

package.json（仅展示代理相关设置） #

{
  "name": "hypercodez",
  "version": "1.0.0",
  "main": "expo/AppEntry.js",
  "proxy":"https://hypercodez.rf.gd",
  "scripts": {
    "start": "expo start",
    "android": "expo run:android",
    "ios": "expo run:ios",
    "web": "expo start --web"
  },
  ...
}

App.js 数据请求代码 #

useEffect(() => {
  const fetchData = async () => {
    const response = await fetch("/api.php", { method: 'GET' });
    console.log(response); // 调试用
  };
  fetchData();
}, []);

错误响应的HTML代码 #

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <title>hypercodez</title>
    <style id="expo-reset">
        html,
        body {
            height: 100%;
        }
        body {
            overflow: hidden;
        }
        #root {
            display: flex;
            height: 100%;
            flex: 1;
        }
    </style>
</head>

<body>
    <noscript> You need to enable JavaScript to run this app. </noscript>
    <div id="root"></div>
    <script src="/node_modules%5Cexpo%5CAppEntry.bundle?platform=web&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.routerRoot=app" defer></script>
</body>

</html>

问题原因与解决办法 #

核心原因 #

1. Expo不支持package.json的proxy配置：这个字段是Create React App（web项目）专属的，React Native/Expo完全不识别。请求/api.php时没有转发到目标域名，反而请求了本地Expo服务器的资源，因此返回了Expo的web启动页面HTML。
2. 真机网络路径无效：安卓真机无法访问本地Expo服务器的相对路径，加上没有正确指向API域名，直接导致请求失败。

解决步骤 #

1. 使用完整API URL发起请求：把Fetch中的相对路径替换为目标API的完整地址：

const response = await fetch("https://hypercodez.rf.gd/api.php", { method: 'GET' });

2. 适配安卓网络环境：
   • 若API使用HTTP协议（非HTTPS），需在app.json中开启明文流量支持：

     "android": {
       "usesCleartextTraffic": true,
       // 其他安卓配置...
     }
     

   • 确认项目已添加网络权限（Expo模板默认包含，裸项目需手动在AndroidManifest.xml中添加<uses-permission android:name="android.permission.INTERNET" />）
3. 删除无效的proxy配置：直接移除package.json中的proxy字段，避免混淆Native与web项目配置。

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