Apollo Client如何在本地与远程服务器间切换？

已有方案的补充分析 #

你提到的三个方案都是前端常用的切换手段，各自适配不同场景：

• 环境变量方案：适合固定环境的切换（如开发/测试/生产），构建阶段就确定目标地址，无需运行时调整，适配CI/CD自动化流程。
• 查询字符串参数：适合临时调试场景，运行时灵活切换目标服务，但需要手动拼接参数，不适合正式环境使用。
• package.json脚本目标：本质是封装环境变量的切换逻辑，让开发者通过npm run dev:local/npm run dev:remote这类命令快速切换，降低操作成本。

补充实用方案 #

除上述三种，还有以下几种可落地的方案：

1. 基于本地开发工具的代理配置 #

在React项目中，利用setupProxy.js（Vite项目对应vite.config.js的server.proxy）配置代理规则，根据启动命令自动切换转发目标：

// React项目的setupProxy.js
const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  const target = process.env.REACT_APP_API_TARGET === 'local' 
    ? 'http://localhost:3001' 
    : 'https://your-remote-server.com';
  
  app.use('/.netlify/functions/foo', createProxyMiddleware({
    target,
    changeOrigin: true,
  }));
};

这种方式下客户端代码可继续使用相对URI'/.netlify/functions/foo'，本地开发时通过代理转发到目标服务，无需修改业务代码，保持代码一致性。

2. 本地配置文件动态覆盖 #

在项目根目录创建.env.local文件，本地开发时直接修改该文件中的API地址：

# .env.local
REACT_APP_API_URI=http://localhost:3001/.netlify/functions/foo
# 切换远程时改为：
# REACT_APP_API_URI=https://your-remote-server.com/.netlify/functions/foo

该文件不会被提交到版本库，避免污染公共配置，适合个人开发时快速切换，无需修改脚本或业务代码。

3. 基于浏览器本地存储的切换 #

在客户端UI中添加切换按钮，将用户选择的服务地址存入LocalStorage，下次启动时自动读取：

// 读取配置，优先用LocalStorage，默认用环境变量
const savedApiUri = localStorage.getItem('API_URI');
const apiUri = savedApiUri || process.env.REACT_APP_API_URI;

const httpLink = createHttpLink({
  uri: apiUri,
});

// UI中的切换逻辑
const toggleApiTarget = (target) => {
  const uri = target === 'local' 
    ? 'http://localhost:3001/.netlify/functions/foo' 
    : 'https://your-remote-server.com/.netlify/functions/foo';
  localStorage.setItem('API_URI', uri);
  window.location.reload();
};

这种方式适合需要频繁切换且不想重启服务的场景，比如测试不同环境的接口表现。

通用实现推荐 #

如果要兼顾开发便捷性和生产环境稳定性，推荐采用「环境变量 + 本地代理」的组合方案：

1. 在package.json中定义不同环境的启动脚本：

"scripts": {
  "start": "react-scripts start",
  "start:local": "REACT_APP_API_TARGET=local react-scripts start",
  "start:remote": "REACT_APP_API_TARGET=remote react-scripts start",
  "build": "react-scripts build"
}

2. 配置setupProxy.js根据环境变量转发请求，保持客户端代码使用相对URI；
3. 生产环境通过环境变量直接设置远程API地址，无需代理。

该方案既保留了代码的一致性，又能通过简单命令切换目标服务，同时适配CI/CD自动化流程。

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