Vue 3 项目本地开发时 Axios 报跨域实为浏览器同源策略限制，解决方法是配置 Vite 代理：在 vite.config.ts 中设置 server.proxy，以 /api 为前缀转发请求至后端地址，并开启 changeOrigin 和 rewrite；Axios 实例 baseURL 设为 '/api'，由 Vite 拦截并转发，生产环境需 Nginx 配合重写。
Vue 3 项目本地开发时 Axios 报跨域，根本不是 Axios 的问题，而是浏览器同源策略限制——请求发到了前端端口（如 http://localhost:5173），但目标接口在另一个地址（如 http://localhost:8081 或 https://api.example.com）。解决的关键是：**让开发服务器（Vite）代替浏览器去转发请求，从而绕过跨域检查**。Axios 只需按“同源”方式写请求路径，代理层自动处理真实转发。
配置 Vite 代理（核心步骤）
在项目根目录的 vite.config.ts（或 .js）中添加 server.proxy 配置：
- 用
/api作为前端请求前缀（例如axios.get('/api/users')） -
target填后端真实地址（支持http或https） -
changeOrigin: true必须开启，否则目标服务可能拒绝请求 -
rewrite用于去掉路径中的/api前缀，确保后端收到的是干净路径（如/users）
示例配置：
export default defineConfig({
server: {
proxy: {
'/api': {
target: 'http://localhost:8081', // 后端实际地址
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
}
}
}
})
Axios 实例统一使用 /api 前缀
在 src/utils/request.ts 中创建 axios 实例，baseURL 设为 '/api'：
立即学习“前端免费学习笔记（深入）”；
- 所有请求自动拼接该前缀，比如
get('/users')实际发出的是GET /api/users - Vite 拦截到
/api/xxx请求后，按上面 proxy 规则转发给后端 - 生产环境部署时，需配合 Nginx 重写规则（如把
/api转发到后端域名），避免直接暴露后端地址
代码示例：
import axios from 'axios'
export const request = axios.create({
baseURL: '/api',
timeout: 10000,
headers: { 'Content-Type': 'application/json' }
})
验证与常见踩坑点
启动项目后，打开浏览器开发者工具 Network 面板，观察请求：
- 看到请求地址显示为
http://localhost:5173/api/login→ 正常（前端视角） - 点击该请求，在 Headers → Request URL 查看实际发起地址 → 应为
http://localhost:8081/login（代理生效） - 如果仍报跨域：检查
target地址是否可访问、是否漏写changeOrigin: true、是否用了 HTTPS 目标但未配证书信任 - 如果返回 404：确认
rewrite是否正确移除了前缀，后端路由是否匹配（如后端接口是/users，就别写成/api/api/users）
进阶：多环境区分代理路径
开发和测试环境后端地址不同？可用环境变量动态配置：
- 在
.env.development中定义：VITE_API_BASE=/api-dev - 在
.env.staging中定义：VITE_API_BASE=/api-staging - vite.config.ts 中读取：
[import.meta.env.VITE_API_BASE]: { target: '...' } - axios 实例中
baseURL改为import.meta.env.VITE_API_BASE
这样一套代码就能适配不同后端地址，无需手动改配置。
