React如何实现开发环境API请求指向本地、生产环境指向远程服务

你可以根据项目的构建工具选择以下任意一种方案，都可以实现不同环境自动切换API地址的需求：

方案1：使用环境变量（最常用方案） #

如果你是用Create React App（CRA）创建的项目 #

• 在项目根目录分别新建两个环境配置文件，都加入.gitignore避免提交到代码仓库：
  • 开发环境配置.env.development：写入REACT_APP_API_BASE_URL=http://localhost:你本地后端的端口号
  • 生产环境配置.env.production：写入REACT_APP_API_BASE_URL=https://你的AWS后端服务地址
• 所有API请求的baseURL统一从环境变量读取，以axios为例：

  const request = axios.create({
    baseURL: process.env.REACT_APP_API_BASE_URL
  })
  

• 注意：CRA要求所有注入前端的自定义环境变量必须以REACT_APP_为前缀，否则无法正常读取
• 你也可以直接在Netlify控制台的站点设置->环境变量页面添加REACT_APP_API_BASE_URL，优先级高于本地配置文件，安全性更高

如果你是用Vite创建的项目 #

操作逻辑和CRA一致，仅环境变量的前缀和读取方式有区别：

• 环境变量前缀改为VITE_，例如VITE_API_BASE_URL=http://localhost:3001
• 代码中读取方式改为import.meta.env.VITE_API_BASE_URL
• 同样支持在Netlify后台配置生产环境变量

方案2：使用Netlify重定向代理（无需修改代码） #

如果你不想在代码中硬写不同环境的地址，可以用Netlify的代理规则直接转发请求：

• 在项目的public目录下新建名为_redirects的无后缀文件
• 写入以下规则：

  /api/*  https://你的AWS后端地址/api/:splat  200
  

• 该规则会把所有前端发往/api/xxx路径的请求，自动由Netlify代理转发到AWS后端的对应路径，同时还能解决生产环境跨域问题
• 本地开发时你只需要保留原有的本地代理配置（比如CRA的setupProxy、Vite的server.proxy）即可，无需修改任何请求代码

部署完成后打开浏览器控制台的网络面板，随便触发一个API请求，检查请求的根域名是否已经替换为AWS的后端地址，确认配置生效。

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