Expo调用本地托管服务器时如何将localtunnel URL接入React Native代码

package.json 中的 homepage 字段仅作用于 React 等前端 Web 项目的打包配置，React Native 运行逻辑不读取该字段，因此配置后不会生效。

你可以通过以下步骤将 localtunnel 生成的公网地址接入 React Native 项目：

步骤1：统一管理接口基础地址 #

建议单独抽离公共配置文件存储公网地址，避免硬编码到每个请求逻辑中，方便后续地址变更时统一修改：

1. 在项目中新建配置文件，例如 src/config/api.js，写入以下内容：

// 替换为你自己生成的 localtunnel 公网地址
export const BASE_API_URL = 'https://application-mock-server.localtunnel.me';

// 也可以根据环境动态切换地址，开发用隧道地址、生产环境用正式服务地址
// export const BASE_API_URL = __DEV__ 
//   ? 'https://application-mock-server.localtunnel.me' 
//   : 'https://你的正式线上服务地址';

步骤2：在请求逻辑中引用基础地址 #

原生 fetch 请求示例 #

import { BASE_API_URL } from '../config/api';

// 发起请求时拼接基础地址与接口路径
const fetchData = async () => {
  const response = await fetch(`${BASE_API_URL}/你要请求的接口路径`);
  const result = await response.json();
  return result;
};

Axios 请求示例 #

如果使用 Axios 发送请求，可以直接将公网地址配置为实例的 baseURL，无需每次手动拼接：

import axios from 'axios';
import { BASE_API_URL } from '../config/api';

// 创建全局 Axios 实例
const apiClient = axios.create({
  baseURL: BASE_API_URL,
  timeout: 10000
});

// 直接传入接口路径即可自动拼接基础地址
const getUserInfo = (userId) => {
  return apiClient.get(`/user/${userId}`);
};

其他注意事项 #

• localtunnel 默认每次重启都会生成随机地址，你可以在启动命令中添加 --subdomain 参数固定子域名，避免每次都修改配置：lt --port 你本地服务的端口号 --subdomain 自定义固定前缀
• 本地运行的后端服务需要配置跨域规则，否则 Expo 端请求会触发 CORS 错误，建议在本地服务的响应头中添加 Access-Control-Allow-Origin: * 临时调试用
• 如果遇到隧道连接不稳定的情况，也可以选择 ngrok 等同类内网穿透工具替代，配置逻辑完全一致，替换 BASE_API_URL 的值即可

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