前端配置代理解决发送cookie问题

场景：

在开发任务管理系统时，我遇到了一个典型的身份认证问题：用户登录成功后，调获取当前用户信息接口却提示"用户未登录"。系统核心流程如下：

用户登录：调用 /login 接口，返回 JSESSIONID Cookie
角色分配：调用 /user/getCurrentUser 接口，需携带登录Cookie供后端验证身份

但实际开发中发现，角色分配接口始终返回未登录错误。通过抓包分析（抓一天了，痛苦），最终定位问题：跨域请求未正确携带Cookie，导致后端无法识别用户身份。

问题现象：

此时未配置代理的问题代码（注意这里配置了withCredentials:true，但是无效）：

<script lang="ts" setup>
import axios from 'axios';const request = axios.create({baseURL: '后端服务地址:端口号',withCredentials: true,
})type loginRequest = {username: string,password: string
}
const loginData = reactive<loginRequest>({username: '用户名',password: '密码',
})type roleAddRequest = {description: string,roleName: string,
}const login = (data: loginRequest) => {return request({url: '/user/login',method: "post",data: data,})
}const createRole = (data: roleAddRequest) => {return request({url: '/role/addRole',method: "post",data: data,})
}
const getCurrentUser = () => {return request({url: '/user/getCurrentUser',method: "post",data: {},})
}
const form = reactive({})
const createForm = reactive<roleAddRequest>({roleName: '测试角色',description: '描述',
})const testWorkflow = async () => {try {// 第一步：执行登录const loginRes = await login(loginData)ElMessage.success(loginRes.data.message)console.log('登录响应', loginRes.data)// 第二步：获取当前用户信息const currentUser = await getCurrentUser()ElMessage.success(currentUser.data.message)console.log('获取响应', currentUser.data)// 第三步：创建角色const roleRes = await createRole(createForm)ElMessage.success(roleRes.data.message)console.log('创建角色', roleRes.data)} catch (error) {console.error('流程执行失败', error)ElMessage.error(axios.isAxiosError(error)? error.response?.data?.message || '请求异常': '未知错误')}
}onMounted(() => testWorkflow())
</script>

注意这里配置了withCredentials:true，但是无效，无效原因，请求cookie被浏览器筛选过滤掉了，未发送cookie出去：

解决方式：

配置vite.config.ts文件：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'// https://vite.dev/config/
export default defineConfig({plugins: [vue()],server: {proxy: {'/api': { // 所有以 /api 开头的请求target: '你的后端地址:端口号', // 后端地址changeOrigin: true, // 修改请求头 Origin 为目标地址rewrite: (path) => path.replace(/^\/api/, '') // 移除 /api 前缀}}}
})

正确请求代码：

<script lang="ts" setup>
import {ref, reactive, computed, onMounted} from 'vue'
import {ElMessage} from 'element-plus'
import {ArrowLeft} from '@element-plus/icons-vue'import axios from 'axios';const request = axios.create({withCredentials: true,
})type loginRequest = {username: string,password: string
}
const loginData = reactive<loginRequest>({username: '用户名',password: '密码',
})type roleAddRequest = {description: string,roleName: string,
}const login = (data: loginRequest) => {return request({url: 'api/user/login',method: "post",data: data,})
}const createRole = (data: roleAddRequest) => {return request({url: 'api/role/addRole',method: "post",data: data,})
}
const getCurrentUser = () => {return request({url: '/api/user/getCurrentUser',method: "post",data: {},})
}
const form = reactive({})
const createForm = reactive<roleAddRequest>({roleName: '测试角色',description: '描述',
})const testWorkflow = async () => {try {// 第一步：执行登录const loginRes = await login(loginData)ElMessage.success(loginRes.data.message)console.log('登录响应', loginRes.data)// 第二步：获取当前用户信息const currentUser = await getCurrentUser()ElMessage.success(currentUser.data.message)console.log('获取响应', currentUser.data)// 第三步：创建角色const roleRes = await createRole(createForm)ElMessage.success(roleRes.data.message)console.log('创建角色', roleRes.data)} catch (error) {console.error('流程执行失败', error)ElMessage.error(axios.isAxiosError(error)? error.response?.data?.message || '请求异常': '未知错误')}
}onMounted(() => testWorkflow())</script>

运行，请求携带cookie：