React-Native中package.json的proxy配置未生效问题排查

问题根源 #

你在package.json里配置的proxy字段是Create React App（Web项目）专属特性，React Native完全不支持这个机制。RN运行在原生APP容器中，没有Web开发服务器来帮你转发请求，直接用fetch('/api')时，请求会被发送到RN自身的调试服务器地址（比如iOS的localhost:8081、Android的对应端口），根本没到达你的后端服务，这就是为什么后端日志没触发。

可行解决方案 #

1. 定义全局基础URL常量 #

这是最直接且通用的方案，适配开发和生产环境：

// 建议放在单独的工具文件，比如src/utils/api.ts
const BASE_API_URL = __DEV__ ? 'http://localhost:5000' : 'https://你的生产环境域名';

// 在组件中使用
fetch(`${BASE_API_URL}/api`)
  .then(res => res.json())
  .then(data => console.log(data));

__DEV__是RN内置的环境变量，开发环境自动为true，生产环境为false，能自动切换地址。

2. 配置Metro实现开发环境代理 #

如果不想每次都写全路径，可以通过Metro配置实现请求转发，仅适用于开发阶段：

1. 项目根目录创建/修改metro.config.js：

const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');

module.exports = mergeConfig(getDefaultConfig(__dirname), {
  server: {
    enhanceMiddleware: (middleware) => (req, res, next) => {
      // 把所有/api开头的请求转发到后端服务
      if (req.url.startsWith('/api')) {
        req.url = `http://localhost:5000${req.url}`;
      }
      return middleware(req, res, next);
    },
  },
});

2. 重启Metro服务，之后就能直接用fetch('/api')发起请求了。

3. Android模拟器特殊处理 #

如果是Android模拟器，localhost无法访问主机的后端服务，需要用10.0.2.2（Android模拟器映射主机localhost的专用地址）替换：

const BASE_API_URL = __DEV__ ? 'http://10.0.2.2:5000' : 'https://你的生产环境域名';

注意事项 #

• 后端服务必须正常运行在5000端口，确保Postman能正常访问
• 生产环境一定要用正式的域名地址，不能依赖本地localhost
• iOS模拟器可以直接用localhost，无需特殊替换

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