如何配置create-react-app以IP地址连接API服务器？

我完全懂你现在的困扰：用create-react-app开发时，客户端默认硬连localhost的API服务器，导致其他设备通过你的IP访问Web客户端时，API请求会直接打到它们自己的localhost上，根本没法做跨设备调试。而且你改env-variables.js时发现process.env.ip返回undefined，这其实是create-react-app的环境变量规则在搞事情，别急，我给你几个可行的解决方案：

核心前提：CRA的环境变量规则 #

首先得明确：create-react-app只会把以REACT_APP_开头的环境变量注入到客户端代码中，其他不带这个前缀的变量（比如你用的ip）会被直接忽略，所以process.env.ip自然是undefined——这是CRA的安全机制，防止敏感变量不小心泄露到客户端。

方案1：手动指定IP（快速临时解决） #

如果只是临时调试，可以在启动项目时手动传入你的本地IP：

1. 打开package.json，修改scripts里的start命令：

   "scripts": {
     "start": "REACT_APP_API_IP=192.168.x.x react-scripts start",
     "build": "react-scripts build",
     ...
   }
   

   把192.168.x.x换成你实际的本地IP（可以通过ifconfig或ipconfig命令查看）。
2. 在你的环境变量配置文件（比如env-variables.js）里，这样定义GRAPHQL_ENDPOINT_URI：

   export const GRAPHQL_ENDPOINT_URI = `http://${process.env.REACT_APP_API_IP}:4000/graphql`;
   

3. 重启项目，现在客户端就会用你指定的IP去请求API了。

方案2：自动获取本地IP（长期优雅解决） #

手动输IP太麻烦，我们可以写个小脚本自动获取本地IP，然后注入到环境变量中：

1. 在项目根目录创建一个start-with-ip.js文件，内容如下：

   const os = require('os');
   const { spawn } = require('child_process');
   
   // 获取本地IPv4地址（排除内网回环地址）
   function getLocalIP() {
     const interfaces = os.networkInterfaces();
     for (const name of Object.keys(interfaces)) {
       for (const iface of interfaces[name]) {
         if (iface.family === 'IPv4' && !iface.internal) {
           return iface.address;
         }
       }
     }
     return 'localhost'; // 兜底，获取不到IP时用localhost
   }
   
   // 设置环境变量
   process.env.REACT_APP_API_IP = getLocalIP();
   
   // 启动react-scripts start
   const startProcess = spawn('npm', ['run', 'start:original'], { stdio: 'inherit', shell: true });
   
   startProcess.on('exit', (code) => {
     process.exit(code);
   });
   

2. 修改package.json的scripts，新增一个start:original命令，把原来的start内容移过去，然后让start指向我们的脚本：

   "scripts": {
     "start": "node start-with-ip.js",
     "start:original": "react-scripts start",
     "build": "react-scripts build",
     ...
   }
   

3. 同样在env-variables.js里用process.env.REACT_APP_API_IP来拼接API地址：

   export const GRAPHQL_ENDPOINT_URI = `http://${process.env.REACT_APP_API_IP}:4000/graphql`;
   

4. 现在启动项目时，脚本会自动获取你的本地IP并注入，完全不用手动输入，跨设备调试时其他设备访问你的IP就能正常请求API了。

额外注意：区分开发和生产环境 #

如果是生产环境，你肯定不会用IP，而是用正式域名，所以可以在代码里做个判断：

const isProduction = process.env.NODE_ENV === 'production';
export const GRAPHQL_ENDPOINT_URI = isProduction 
  ? 'https://your-production-domain.com/graphql'
  : `http://${process.env.REACT_APP_API_IP || 'localhost'}:4000/graphql`;

这样开发环境用自动获取的IP，生产环境用正式域名，完美兼容。

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