Vue3 + Axios + Vite环境下跨域问题求助

看起来你的跨域问题是因为Axios的baseURL配置没和Vite代理规则配合好导致的，我帮你梳理下问题根源和解决步骤：

问题分析 #

你已经配置了Vite代理，要把/api开头的请求转发到后端，但一开始Axios直接把请求发去了http://localhost:8088/api——等于绕过了Vite代理，浏览器直接和后端服务器通信，自然触发跨域。后来改成api又因为路径格式不对，没触发代理规则。

解决方案 #

1. 修正Axios的baseURL配置

把Axios的baseURL改成带斜杠的相对路径'/api'，这样所有请求都会先发送到Vite的开发服务器（比如默认的http://localhost:5173），再由Vite转发到后端，彻底绕开浏览器的跨域限制。

修改后的axios.js：

import axios from "axios";

let config = {
  baseURL: '/api', // 关键：改成带斜杠的相对路径
  timeout: 1000,
  withCredentials: true
}

const instance = axios.create(config)

export default instance

2. 确认Vite代理规则（你的配置其实是对的，再核对下）

你的vite.config.js代理配置没问题，这个规则会把前端发送的/api/user/login转发成http://localhost:8088/user/login，正好匹配后端接口路径：

proxy: {
  "/api": {
    target: "http://localhost:8088",
    secure: false,
    changeOrigin: true,
    rewrite: (path) => path.replace(/^\/api/, '') // 去掉/api前缀，转发到后端的/user/login
  }
}

3. 页面请求保持不变

你页面里的请求代码不用改，因为Axios的baseURL是/api，实际请求的完整路径会自动拼接成/api/user/login，正好触发Vite代理：

$axios.post('/user/login', {
  u_account: ruleForm.account,
  u_password: ruleForm.password
})
// ... 后续逻辑

4. 重启Vite开发服务器

修改完配置文件后，一定要重启Vite，确保新配置生效——很多时候配置不生效都是因为没重启服务器。

额外提醒 #

• 代理只在开发环境生效，生产环境需要用Nginx反向代理或者后端配置CORS。
• 如果你的后端接口本身就带/api前缀，那把Vite代理的rewrite规则去掉就行，比如改成rewrite: (path) => path，这样转发后的路径就是http://localhost:8088/api/user/login。

备注：内容来源于stack exchange，提问作者Lynx