Expo-React-Native生产环境中Neon DB的URL无效问题求助

问题根源 #

开发环境下，Expo的Metro Bundler默认支持相对路径的代理转发，但生产APK是独立运行的客户端，没有内置代理机制，直接使用/(api)/xxx这类相对路径会触发URL格式错误，必须使用完整的HTTPS协议开头的接口地址。

解决方案 #

1. 配置环境变量区分开发/生产环境

通过环境变量分别设置开发和生产的API基础地址，避免硬编码路径：

• 项目根目录创建两个环境配置文件：

  # .env.development
  API_BASE_URL=/api
  

  # .env.production
  API_BASE_URL=https://your-deployed-api-domain.com/api
  

  （替换your-deployed-api-domain.com为你实际部署API的域名，比如Vercel/Netlify部署后的域名）
• 安装expo-constants用于读取环境变量：

  npx expo install expo-constants
  

• 在app.config.js中配置Expo的环境变量映射：

  import 'dotenv/config';
  
  export default {
    expo: {
      extra: {
        API_BASE_URL: process.env.API_BASE_URL,
      },
    },
  };
  

• 代码中读取并拼接URL：

  import Constants from 'expo-constants';
  
  const apiBaseUrl = Constants.expoConfig?.extra?.API_BASE_URL || '/api';
  const createDriverUrl = `${apiBaseUrl}/driver/create`;
  
  // 发起请求
  fetch(createDriverUrl, { /* 请求配置 */ })
  

2. 封装统一API请求工具

写一个复用的请求工具函数，自动处理基础URL，减少重复代码：

// utils/apiClient.js
import Constants from 'expo-constants';

const BASE_URL = Constants.expoConfig?.extra?.API_BASE_URL || '/api';

export async function requestApi(endpoint, options = {}) {
  const fullUrl = `${BASE_URL}${endpoint}`;
  try {
    const response = await fetch(fullUrl, {
      headers: {
        'Content-Type': 'application/json',
        ...options.headers,
      },
      ...options,
    });
    if (!response.ok) throw new Error(`HTTP错误: ${response.status}`);
    return await response.json();
  } catch (error) {
    console.error('接口请求失败:', error);
    throw error;
  }
}

// 使用示例
import { requestApi } from '../utils/apiClient';

async function createDriver(data) {
  try {
    const result = await requestApi('/driver/create', {
      method: 'POST',
      body: JSON.stringify(data),
    });
    return result;
  } catch (err) {
    // 处理错误
  }
}

3. 验证生产URL的有效性

在配置生产环境URL前，先通过Postman或浏览器直接访问该完整URL，确认接口能正常返回数据，避免因域名错误、CORS配置等问题导致后续报错。

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