React JS项目如何避免硬编码IP地址实现多环境接口地址切换？

方案1：使用React环境变量区分部署环境（最推荐） #

Create React App 原生支持基于环境的变量注入，你只需要在项目根目录创建对应环境的配置文件即可：

• 开发环境配置文件：.env.development，写入内容：

REACT_APP_API_BASE_URL=http://localhost:8080

• 生产环境配置文件：.env.production，写入内容：

REACT_APP_API_BASE_URL=http://1.1.1.1:9080

修改你的业务代码，直接调用环境变量拼接接口地址即可：

download() {
  setTimeout(() => {
    const response = {
      file: `${process.env.REACT_APP_API_BASE_URL}/api/export`,
    };
    window.open(response.file);
  }, 100);
}

启动/打包项目时会自动加载对应环境的配置：

• 本地执行npm start启动开发服务时，自动读取.env.development的配置
• 执行npm run build打生产包时，自动读取.env.production的配置

注意：自定义环境变量必须以REACT_APP_为前缀，否则会被CRA自动过滤无法读取。

方案2：使用相对路径+代理配置（适合前后端同域部署场景） #

如果你的React应用和Spring Boot服务后续是同域部署的，完全可以不用写死域名，直接用相对路径即可：

1. 开发环境下，在React项目的package.json中加一行配置"proxy": "http://localhost:8080"，所有/api开头的请求会自动代理到后端地址，不需要额外做跨域配置。
2. 生产环境部署时，用Nginx等网关把/api前缀的请求转发到Spring Boot服务的地址即可。

修改后的代码更简洁：

download() {
  setTimeout(() => {
    const response = {
      file: "/api/export",
    };
    window.open(response.file);
  }, 100);
}

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