場景：
在開發任務管理系統時，我遇到了一個典型的身份認證問題：??用戶登錄成功后，調獲取當前用戶信息接口卻提示"用戶未登錄"??。系統核心流程如下：
- ??用戶登錄??：調用?
/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：
