React前端存储可变更API端点的最规范实现方案

你觉得这个写法不规范是完全正确的，它的实际缺陷包括：

• 安全逻辑存在漏洞：你认为每次页面加载重设值就无法被篡改，但页面加载完成后，用户完全可以通过浏览器控制台手动修改localStorage内的apiEndpoint值，后续所有API请求都会发往用户篡改后的地址，存在数据泄露、请求劫持的风险。
• 逻辑冗余：既然每次页面加载都要强制覆盖该值，localStorage的持久化存储特性完全没有发挥作用，属于无意义的代码。
• 配置耦合度高：API地址和业务代码绑定，每次切换环境（本地开发/测试/生产）、调整后端地址都需要修改业务代码，极易因为漏改引发线上故障。

这是前端行业存储多环境差异化配置的通用惯例，配置值会在构建阶段直接注入静态代码，不会暴露在可被用户随意修改的本地存储中，不同环境的配置互相独立，切换环境不需要改动业务逻辑。

Vite 项目配置方式 #

• 在项目根目录新建对应环境的配置文件：
  • 本地开发环境用.env.development
  • 生产部署环境用.env.production
• Vite要求自定义环境变量必须以VITE_为前缀，在对应文件中写入API地址配置：

  # .env.development 配置示例
  VITE_API_ENDPOINT = http://10.1.1.177:8080
  

  # .env.production 配置示例
  VITE_API_ENDPOINT = https://api.your-real-domain.com
  

• 业务代码中直接通过内置对象取值即可，比如封装请求实例时：

  import axios from 'axios'
  const service = axios.create({
    baseURL: import.meta.env.VITE_API_ENDPOINT
  })
  export default service
  

• 部署时可以直接在CI/CD流程中注入对应环境变量，不需要修改源码。

Create React App (CRA) 项目配置方式 #

• 同样在根目录新建.env.development和.env.production文件，CRA要求自定义环境变量以REACT_APP_为前缀：

  REACT_APP_API_ENDPOINT = http://10.1.1.177:8080
  

• 业务代码中通过process.env.REACT_APP_API_ENDPOINT取值即可。

如果你的后端地址调整非常频繁，不想每次改地址都重新构建前端包，可以使用运行时配置方案：

• 在项目public目录下新建独立的config.js文件，该文件不会被构建工具编译打包，部署后可以直接修改服务器上的该文件内容：

  // public/config.js
  window.__RUNTIME_CONFIG__ = {
    API_ENDPOINT: "http://10.1.1.177:8080"
  }
  

• 在项目入口index.html的最顶部引入该文件，保证配置在业务代码加载前就完成注入：

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

• 业务代码中直接读取window.__RUNTIME_CONFIG__.API_ENDPOINT作为请求基地址即可，后续调整地址只需要修改服务器上的config.js文件，刷新页面就会生效，不需要重新构建前端产物。
• 注意要确保config.js和前端站点同域部署，避免第三方篡改该文件引入安全风险。

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