如何在Fetch请求中用变量替代固定URL？解决重复编写地址问题

针对你遇到的两个痛点——避免在每个源文件硬编码固定URL，以及移除localhost适配部署后的域名，分享几个我在项目里亲测好用的方案：

一、替代全局变量：集中管理API基础地址 #

全局变量虽然能解决重复编码问题，但容易造成污染且维护性差，推荐以下两种更优雅的方式：

1. 环境变量配置（推荐） #

借助构建工具或运行时的环境变量机制，把API地址抽离到环境配置中：

• 前端项目（比如Vite、Create React App）：
  创建.env.development和.env.production文件，分别配置开发和生产环境的地址：

  // .env.development
  VITE_API_BASE_URL=http://localhost:3000
  
  // .env.production
  VITE_API_BASE_URL=https://your-production-domain.com
  

  然后在代码中直接引用：

  const submitUrl = `${import.meta.env.VITE_API_BASE_URL}/submit`;
  

• 后端项目（比如Node.js）：
  用dotenv包加载.env文件，配置后通过process.env.API_BASE_URL获取地址。

2. 集中式配置文件 #

创建一个单独的配置文件，统一管理所有API相关的地址，其他文件通过导入使用：

// src/config/api.js
export const API_BASE_URL = process.env.API_BASE_URL || 'https://default-fallback-domain.com';
export const SUBMIT_ENDPOINT = `${API_BASE_URL}/submit`;

在需要的文件中导入：

import { SUBMIT_ENDPOINT } from '../config/api.js';

async function submitCode(data) {
  const response = await fetch(SUBMIT_ENDPOINT, {
    method: 'POST',
    body: JSON.stringify(data)
  });
  // ...后续逻辑
}

这种方式模块化程度高，修改地址只需要改配置文件，比全局变量更可控。

二、移除localhost：适配动态部署域名 #

要解决localhost在生产环境失效的问题，核心是让地址根据环境自动切换，推荐三种方案：

1. 环境变量区分开发/生产 #

上面提到的环境变量配置已经天然解决了这个问题——开发环境用localhost，生产环境用部署后的域名，构建工具会自动加载对应环境的变量，无需手动修改代码。

2. 动态获取当前域名（前后端同域场景） #

如果你的前端和API部署在同一个域名下，可以直接动态获取当前页面/服务的域名：

• 前端：

  const API_BASE_URL = window.location.origin;
  const submitUrl = `${API_BASE_URL}/submit`;
  

• 后端（Node.js）：

  function getApiBaseUrl(req) {
    return `${req.protocol}://${req.headers.host}`;
  }
  

  这种方式完全不需要配置，自动适配任何部署域名，适合前后端同域的架构。

3. CI/CD阶段注入生产地址 #

如果你的项目用GitHub Actions、GitLab CI等工具部署，可以把生产域名存在项目密钥中，在构建/部署阶段自动注入环境变量：
比如GitHub Actions的配置示例：

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v4
      - name: Set up Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20'
      - name: Install dependencies
        run: npm install
      - name: Build app
        env:
          VITE_API_BASE_URL: ${{ secrets.PRODUCTION_API_URL }}
        run: npm run build
      - name: Deploy to server
        # 你的部署逻辑

这种方式把敏感的生产地址放在密钥管理中，更安全，也避免了代码中出现生产地址。

这些方案都比硬编码URL或全局变量更优雅，模块化且易于维护，你可以根据自己的技术栈和部署场景选择最合适的方式。

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