React Native/Expo中fetch请求本地localhost接口报网络错误如何解决

问题现象 #

后端采用 Deno 开发的 React Native/Expo 应用，本地 API 服务运行在 4000 端口，Expo 端使用 fetch 调用接口时持续抛出如下错误：

[Unhandled promise rejection: TypeError: Network request failed] at node_modules/whatwg-fetch/dist/fetch.umd.js:535:17 in setTimeout$argument_0

现有代码 #

后端 Oak 服务配置 #

import { Application } from "https://deno.land/x/oak/mod.ts";
import { oakCors } from "https://deno.land/x/cors/mod.ts";
import { APP_HOST, APP_PORT } from "./config.ts";
import router from "./routes.ts";
import _404 from "./controllers/404.ts";
import errorHandler from "./controllers/errorHandler.ts";

const app = new Application();

app.use(oakCors());
app.use(errorHandler);
app.use(router.routes());
app.use(router.allowedMethods());
app.use(_404);

console.log(`Listening on port:${APP_PORT}...`);

前端接口调用代码 #

const App = () => {
  const getData = async () => {
    const response = await fetch("http://localhost:4000/something");
    const data = await response.json();
    console.log(data);
  };

  useEffect(() => {
    getData();
  }, []);

  return (
    ... 
  );
};

已排查情况 #

• 参考常见方案将请求地址中的 localhost 替换为局域网 IP 形式 http://[IP_ADDRESS]:4000/something，问题未解决
• 本地验证服务状态正常：VSCode Thunder Client 可成功调用接口，浏览器访问 http://localhost:4000 可正常获取返回数据

根因与解决步骤 #

现有代码已经配置了CORS放行，无需额外调整跨域规则。问题核心是 Deno 服务默认绑定的监听地址为 127.0.0.1，仅允许本机进程访问，Expo 应用运行在实体机/模拟器环境时属于独立网络设备，无法通过回环地址或局域网 IP 访问到仅绑定回环地址的本地服务。
按以下步骤操作即可修复：

1. 修改后端配置文件中的 APP_HOST 参数值为 0.0.0.0，让服务监听所有可用网络接口，修改后重启 Deno 服务
2. 确认运行 Expo 应用的设备（手机/模拟器）和运行 Deno 服务的电脑连接到同一局域网
3. 根据运行环境选择正确的请求地址：
   • 实体机调试：使用电脑的局域网 IP 替换 localhost，格式为 http://[你的电脑局域网IP]:4000/something
   • Android 模拟器调试：可直接使用 Android 官方预留的宿主机映射地址 10.0.2.2，即请求地址写为 http://10.0.2.2:4000/something
   • iOS 模拟器调试：默认和宿主机共享网络栈，可直接使用 http://localhost:4000/something 访问
4. Windows 系统需检查防火墙配置，放开 4000 端口的入站访问规则，避免请求被系统防火墙拦截

为什么本机浏览器、Thunder Client 可以正常访问？因为这类工具本身运行在电脑本机，走系统回环地址 127.0.0.1 即可访问服务，不受服务监听地址限制。

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