如何解决Vitest测试时的代理配置失效问题？

为什么代理在测试环境不生效？ #

Vite的代理配置是给开发服务器用的，而Vitest运行在jsdom环境中，jsdom本身不会处理HTTP请求的转发逻辑，所以开发时的代理规则在测试场景下完全不生效。

可行解决方案 #

1. 直接给Axios配置测试环境的baseURL

修改你的Axios实例配置，根据环境变量切换baseURL：

import axios from 'axios';

const apiClient = axios.create({
  baseURL: import.meta.env.VITE_NODE_ENV === 'test' 
    ? 'http://localhost:8080'  // 测试环境直接指向真实后端
    : '/api'                   // 开发环境用代理路径
});

这样测试时所有请求都会直接发送到真实后端，绕开Vite代理。

2. 用Axios拦截器重写请求路径

如果不想修改baseURL，可以在Vitest的全局setup文件中添加请求拦截器，自动替换/api前缀：

1. 创建vitest.setup.js文件：

import axios from 'axios';

axios.interceptors.request.use(config => {
  // 把/api开头的路径替换成真实后端地址
  if (config.url?.startsWith('/api')) {
    config.url = config.url.replace(/^\/api/, 'http://localhost:8080');
  }
  return config;
});

2. 在Vite配置中指定setup文件：

export default defineConfig({
  // ...其他配置
  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: ['./vitest.setup.js']  // 加载全局setup文件
  }
});

3. 测试前确保后端服务已启动

集成测试依赖真实后端，所以要保证测试运行时后端服务处于启动状态。可以在package.json中添加组合脚本：

{
  "scripts": {
    "start:backend": "node ./backend/server.js",  // 替换成你的后端启动命令
    "test:api": "npm run start:backend && vitest"
  }
}

运行npm run test:api就会先启动后端，再执行测试。

注意点 #

• jsdom发送请求用的是Node.js的HTTP模块，不受浏览器同源策略限制，所以后端即使开启CORS也不会影响测试请求。
• 不要在测试环境依赖Vite的代理逻辑，两者运行环境完全不同，代理只对开发服务器有效。

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