React API调用场景下如何动态配置后端服务器地址

核心目标是移除硬编码的环境判断逻辑，自动适配开发、生产多场景的后端地址，不需要每次部署都改代码重新打包。

方案1：开发环境代理 + 生产同源适配（推荐，零硬编码） #

这是React项目最通用的实现方式，开发环境通过本地服务代理转发接口请求，生产环境默认走同源请求，不需要写死任何IP、端口。

1. 配置开发环境代理
   根据你使用的脚手架选择对应配置：

• 如果是Create React App搭建的项目，在src目录下新建setupProxy.js文件，配置接口转发规则：

// src/setupProxy.js
const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:5000', // 本地开发后端默认地址
      changeOrigin: true,
      pathRewrite: { '^/api': '' } // 后端接口无/api前缀时开启路径重写
    })
  );
};

• 如果是Vite搭建的项目，直接在vite.config.js中添加代理配置：

// vite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:5000',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
})

2. 改造业务请求代码
   移除原来的production硬编码判断，接口统一走/api前缀，开发环境代理会自动把请求转发到本地5000端口的后端；生产环境部署时只需要在Nginx/网关层配置/api路径的转发规则到对应后端服务，前端不需要做任何改动：

const baseURL = "/api/getAll";
const statusInfo = [];
const job_input = {
  username: "",
  password: ""  
};

useEffect(() => {
  const fetchData = async () => {
    try {
      const response = await axios.post(baseURL, job_input);
      setJobData(response.data.job_details);
    } catch (error) {
      alert(error.message);
    }
  };
  fetchData();
}, []);

方案2：运行时全局配置（适配前后端不同源部署） #

如果生产环境前后端不在同个域名/端口下，可以把后端地址做成运行时可配置项，修改配置不需要重新打包前端代码。

1. 在项目静态资源目录（CRA为public目录，Vite为public目录）新建config.js，挂载全局配置：

// public/config.js
window.APP_CONFIG = {
  // 部署到不同环境时直接修改这个文件的地址即可，不需要重新npm run build
  BACKEND_BASE_URL: "http://localhost:5000"
};

2. 在public/index.html的head标签中提前引入配置文件，保证React代码加载前配置已生效：

<script src="/config.js"></script>

3. 业务代码直接读取全局配置拼接地址：

// 优先读运行时配置，兜底取当前访问源
const backendOrigin = window.APP_CONFIG?.BACKEND_BASE_URL || window.location.origin;
const baseURL = `${backendOrigin}/getAll`;

const statusInfo = [];
const job_input = {
  username: "",
  password: ""  
};

useEffect(() => {
  const fetchData = async () => {
    try {
      const response = await axios.post(baseURL, job_input);
      setJobData(response.data.job_details);
    } catch (error) {
      alert(error.message);
    }
  };
  fetchData();
}, []);

补充：极简本地自动适配逻辑 #

如果不想配置代理，只想快速实现本地开发自动识别，可以基于当前前端访问的主机名自动推导后端地址，支持用局域网IP调试移动端场景：

let baseURL;
if (process.env.NODE_ENV === 'development') {
  // 自动取当前访问前端的主机名，拼接5000端口，不管是localhost还是局域网IP都能适配
  baseURL = `http://${window.location.hostname}:5000/getAll`;
} else {
  // 生产环境默认走当前访问源
  baseURL = `${window.location.origin}/getAll`;
}

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