Vite项目Local与Network地址跨域问题解决

问题

vite构建项目 使用 npm run dev启动项目后控制台生成的两个地址Local和Network在分别访问时，Local地址打开的页面调用接口正常，Network地址打开的页面调用的接口会出现接口请求跨域的问题

http://localhost:5173/

http://192.168.1.12:5173/

分析

• 默认情况下，运行 npm run dev 命令后，vite 会启动本地服务器，并在控制台输出多个地址。例如，如果您的设备连接了 Wi-Fi 和以太网两个网络适配器，并且它们的 IP 地址分别为 192.168.1.100 和 10.1.10.100，那么 vite 在启动本地服务器后，将输出类似于以下的多个 Network 地址
• Local 地址正常：本地开发时，前端项目和后端接口可能在同一台机器，且配置了开发环境跨域代理（如 Vite 的 proxy、Webpack 的 devServer.proxy），让前端请求被代理到后端，从而绕过同源策略。
  Network 地址跨域：此时前端页面的 “源” 是局域网 IP（如 http://192.168.1.2:5173），而后端接口可能只允许 127.0.0.1 或特定域名的跨域请求，导致不匹配触发跨域。
• 跨域的核心是浏览器的同源策略：若网页的 “协议、域名、端口” 与接口服务器不一致，就会触发跨域限制。

解决

经过问题的分析，跨域排查，查看请求出现了 http://localhost:5173/

在代码中进行检查，发现如下配置：src\utils\env.js，将此处的默认地址还原成空即可解决问题

// 环境变量工具函数

/**
 * 获取环境变量，提供默认值
 * @param {string} key - 环境变量key (不需要 VITE_ 前缀)
 * @param {any} defaultValue - 默认值
 * @returns {any} 环境变量值
 */
export function getEnv(key, defaultValue = '') {
  const fullKey = key.startsWith('VITE_') ? key : `VITE_${key}`
  return import.meta.env[fullKey] ?? defaultValue
}

/**
 * 判断是否为开发环境
 * @returns {boolean}
 */
export function isDev() {
  return import.meta.env.DEV
}

/**
 * 判断是否为生产环境
 * @returns {boolean}
 */
export function isProd() {
  return import.meta.env.PROD
}

/**
 * 获取当前环境模式
 * @returns {string} development | production | test
 */
export function getMode() {
  return import.meta.env.MODE
}

/**
 * 获取所有自定义环境变量 (VITE_ 前缀)
 * @returns {object} 环境变量对象
 */
export function getAllEnvVars() {
  const env = {}
  for (const [key, value] of Object.entries(import.meta.env)) {
    if (key.startsWith('VITE_')) {
      env[key] = value
    }
  }
  return env
}

/**
 * 环境变量配置对象
 */
export const ENV_CONFIG = {
  // API配置
  API_URL: getEnv('API_URL', 'http://localhost:5173/'),
  API_TIMEOUT: Number(getEnv('API_TIMEOUT', '10000')),

  // 应用配置
  APP_TITLE: getEnv('APP_TITLE', 'React 19 App'),
  APP_VERSION: getEnv('APP_VERSION', '1.0.0'),

  // 调试配置
  DEBUG: getEnv('DEBUG', 'false') === 'true',

  // 其他配置
  BASE_URL: import.meta.env.BASE_URL,
  MODE: getMode(),
  IS_DEV: isDev(),
  IS_PROD: isProd(),
}

// 开发环境下打印环境变量
if (isDev()) {
  console.log('Environment Variables:', ENV_CONFIG)
}

环境变量管理：

• getEnv 函数用于从环境变量中获取配置值
• 第一个参数 ‘API_URL’ 是要获取的环境变量名称
• 第二个参数 ‘http://localhost:5173/’ 是默认值，当环境变量不存在时使用