React开发中动态设置Apollo GraphQL本地IP端点的最佳实践（无需npm eject）

我之前也遇到过类似的问题，咱们一步步来解决它——首先得搞清楚为什么internal-ip在webpack编译后返回null，然后再看几个靠谱的解决方案：

internal-ip是Node.js端的工具库，用来获取你的开发机器的本地IP，但React代码最终是运行在浏览器里的。webpack编译后，这段代码会在客户端执行，而浏览器没有权限获取宿主机器的本地IP，所以自然返回null。

方案一：使用create-react-app自带的代理（最推荐） #

这个方法不仅能解决IP动态变化的问题，还能顺带解决本地开发的跨域问题，而且完全不用eject。

步骤：

1. 在项目根目录的package.json中添加代理配置：

"proxy": "http://localhost:8080"

2. 修改你的Apollo HttpLink配置，开发环境下直接用相对路径：

const httpLink = new HttpLink({
  uri: process.env.NODE_ENV === 'development' ? '/graphql' : 'https://example.com/graphql'
});

这样当你在本地开发时，前端发送的/graphql请求会被create-react-app的开发服务器自动代理到http://localhost:8080/graphql。如果其他设备访问你的前端（比如http://192.168.1.xx:3000），请求会自动转发到同一IP的8080端口，完全不用关心IP变化。

如果需要更复杂的代理规则（比如多个API端点），可以在src目录下创建setupProxy.js文件（create-react-app会自动识别这个文件，无需手动配置webpack）：

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

module.exports = function(app) {
  app.use(
    '/graphql',
    createProxyMiddleware({
      target: 'http://localhost:8080',
      changeOrigin: true,
    })
  );
};

方案二：通过环境变量动态注入本地IP #

如果你确实需要显式指定后端的IP地址，可以在启动开发服务器时，把本地IP注入到环境变量中，前端直接读取这个变量就行。

步骤：

1. 先安装cross-env（跨平台设置环境变量的工具，避免Windows和Mac的命令差异）：

npm install cross-env --save-dev

2. 修改package.json中的start脚本，用internal-ip获取当前机器的IP并设置为环境变量：

"scripts": {
  "start": "cross-env REACT_APP_GRAPHQL_URI=http://$(npx internal-ip):8080/graphql react-scripts start"
}

注意：create-react-app要求自定义环境变量必须以REACT_APP_开头，否则会被webpack忽略。
3. 前端代码中直接使用这个环境变量：

const httpLink = new HttpLink({
  uri: process.env.REACT_APP_GRAPHQL_URI || 'https://example.com/graphql'
});

每次启动开发服务器时，脚本会自动获取当前机器的本地IP，注入到REACT_APP_GRAPHQL_URI中，前端就能拿到正确的端点地址了。

方案三：利用浏览器的window.location自动拼接地址 #

如果你的后端和前端在同一台机器上运行，只是端口不同，可以让前端自动获取当前页面的域名/IP，然后拼接后端的端口：

const getGraphqlEndpoint = () => {
  if (process.env.NODE_ENV === 'production') {
    return 'https://example.com/graphql';
  }
  // 开发环境下，用当前页面的hostname（可能是localhost或192.168.x.x）加上后端端口
  return `http://${window.location.hostname}:8080/graphql`;
};

const httpLink = new HttpLink({ uri: getGraphqlEndpoint() });

这个方案的前提是你的后端服务监听的是0.0.0.0（允许外部设备访问），而不是只监听localhost，否则其他设备还是无法访问后端。

优先推荐方案一，因为它最简洁，既解决了IP动态变化的问题，又处理了本地开发的跨域，完全不用关心IP的变化。如果有特殊需求，再考虑方案二或方案三。

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