React.js中如何将本地运行主机从localhost改为指定IP？

问题分析 #

你修改React项目运行地址时出现Error: getaddrinfo ENOTFOUND http://127.0.0.1错误，核心原因是HOST环境变量不能带http://前缀——系统会把整个http://127.0.0.1当作主机名去解析，自然找不到对应地址。另外代理配置无效可能是配置方式不对。

解决步骤 #

1. 修正运行IP配置 #

• Linux/macOS系统：修改package.json的scripts字段，去掉HOST值里的http://，直接写IP：

  "scripts": {
    "start": "HOST=127.0.0.1 react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  

  如果需要用局域网IP（比如后端在同一局域网的其他设备），直接替换成对应IP即可，比如HOST=192.168.3.10。

• Windows系统：需要用set命令设置环境变量，格式如下：

  "scripts": {
    "start": "set HOST=127.0.0.1 && react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  

2. 正确配置API代理 #

如果是用create-react-app创建的项目，代理配置分两种情况：

简单代理（单后端地址）

直接在package.json末尾添加proxy字段，值为后端API的基础地址（带http://和端口）：

"proxy": "http://127.0.0.1:5000"

这样前端发起的/api/users这类请求会自动转发到http://127.0.0.1:5000/api/users。

复杂代理（多后端地址/自定义路径）

如果需要更灵活的代理规则，比如不同路径转发到不同后端，需要安装http-proxy-middleware：

npm install http-proxy-middleware --save-dev

然后在项目src目录下创建setupProxy.js文件，添加如下配置（示例）：

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://127.0.0.1:5000',
      changeOrigin: true,
    })
  );
  // 可以添加更多代理规则
  app.use(
    '/external-api',
    createProxyMiddleware({
      target: 'http://other-server:8080',
      changeOrigin: true,
      pathRewrite: { '^/external-api': '' } // 重写路径
    })
  );
};

3. 验证修改 #

保存配置后，重启React开发服务器，控制台会输出类似Local: http://127.0.0.1:3000的地址，说明IP修改成功。同时测试API请求，确认代理是否正常转发。

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