Vue项目中基于HTML select元素动态设置axios BaseURL的实现问题

AI 小北

2026-10-5

问题原因

你当前的方案不生效是因为 axios.create() 是模块导入阶段就会执行的初始化操作，此时用户还未选择站点，Vue.prototype.current_api_endpoint 要么是空值要么是默认值，后续你修改原型属性时，已经创建完成的axios实例不会自动同步更新baseURL配置。

解决方案

核心思路是在请求拦截器中动态赋值baseURL，拦截器会在每次请求发起前执行，总能拿到最新的选中站点地址：

步骤1：存储选中的站点地址

下拉框选择站点时，除了挂载到Vue原型，同时存入localStorage保证页面刷新后配置不丢失：

// 下拉框change事件处理逻辑
handleSiteSelect (selectedEndpoint) {
  localStorage.setItem('selected_endpoint', selectedEndpoint)
  Vue.prototype.$current_endpoint = selectedEndpoint
  // 可选：切换站点后清空原有用户登录信息，避免跨站点token无效
  localStorage.removeItem('user')
}

步骤2：修改axios实例配置

删除axios.create阶段的静态baseURL配置，改到请求拦截器中动态赋值：

import axios from 'axios';
import * as URLConstants from '../configs/urls';

// 初始化时不需要指定baseURL
export const axios_instance = axios.create()

axios_instance.interceptors.request.use(
  function(config) {
    // 动态读取最新选中的站点地址，没有选中则默认用第一个站点
    const savedEndpoint = localStorage.getItem('selected_endpoint')
    config.baseURL = savedEndpoint || URLConstants.SERVICE_BASE_API_URLS[0].endpoint

    // 原有token逻辑保持不变，优化了取值逻辑避免重复JSON.parse
    const userStr = localStorage.getItem('user')
    if (userStr) {
      const user = JSON.parse(userStr)
      if (user.access_token) {
        config.headers["JWTAuthorization"] = 'Bearer ' + user.access_token;
      }
    }
    return config;
  },
  function(error) {
    return Promise.reject(error);
  }
);

步骤3：修正站点配置的语法错误

你贴的站点配置存在语法问题，修正后如下：

export const SERVICE_BASE_API_URLS =  [
    { name: 'Site A', endpoint: 'http://api.a.service.com/api/v1/' },
    { name: 'Site B', endpoint: 'http://api.b.service.com/api/v1' },
]

修改完成后，业务代码不需要做任何改动，每次请求都会自动带上当前选中的站点地址作为baseURL。

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