Vue 3 请求拦截器仅负责携带凭证（如 token 或 cookie），不处理跨域或判断过期；需配合 withCredentials 配置、后端跨域响应头及响应拦截器捕获 401 等信号来识别并处理凭证失效。
Vue 3 中请求拦截器本身不处理跨域，也不直接解决“凭证过期”问题——它只负责在请求发出前添加凭证（如 token 或 cookie），而跨域策略和凭证有效性由浏览器与后端共同决定。真正要做的，是让拦截器配合跨域配置、凭证携带规则和后端返回的过期信号（如 401 状态码或特定响应字段），实现对失效凭证的识别与响应。
确保跨域请求能携带凭证
前端必须显式开启 withCredentials，否则浏览器不会发送 Cookie 或认证头：
- 在 axios 实例配置中设置
withCredentials: true（尤其当后端依赖 session 或 httpOnly cookie 认证时） - 若使用 Vite 开发，需在
vite.config.ts中配置代理并开启changeOrigin: true和secure: false（开发环境） - 注意：启用
withCredentials后，后端响应头必须包含Access-Control-Allow-Origin的具体域名（不能为*），否则浏览器会拒绝响应
请求拦截器里如何安全携带凭证
不要仅靠本地时间判断 token 是否过期（易被篡改、时钟不同步）；应以服务端反馈为准，拦截器只做“携带”动作：
- 从 localStorage / sessionStorage / pinia store 中读取 token
- 若存在，统一按后端约定格式写入请求头，例如：
config.headers.Authorization = `Bearer ${token}` - 若使用 Cookie 认证，确保
withCredentials: true已启用，无需手动设 header - 避免在请求拦截器中解析 JWT 并校验 exp —— 这属于“乐观预判”，不可靠，且可能掩盖真实过期时机
用响应拦截器捕获凭证失效信号
真正的凭证过期识别发生在响应阶段，响应拦截器才是处理核心：
立即学习“前端免费学习笔记（深入）”；
- 检查
error.response?.status === 401：这是最通用、最可靠的过期标识 - 也可补充检查响应体中的业务字段，如
error.response.data.code === 'AUTH_EXPIRED'（需与后端约定） - 检测到失效后，清除本地凭证（
localStorage.removeItem('token')）、重置用户状态，并跳转登录页（router.push('/login')） - 注意避免重复跳转：加锁机制或状态标记（如
isRefreshing = false）防止多个并发请求同时触发登出
为什么不能只靠拦截器“防患于未然”
因为凭证是否有效，最终由后端验证决定。前端无法绕过网络延迟、时钟偏差、token 被主动吊销等现实因素：
- 本地时间比服务器慢几分钟 → 拦截器误判“未过期”，但请求仍被 401 拒绝
- 用户在其他设备登出 → 当前 token 被后端立即作废，但前端无感知
- JWT 的 exp 字段只是建议性声明，后端可额外校验黑名单、签发时间、IP 绑定等
所以拦截器的任务很明确：可靠地带上凭证，再交给响应拦截器依据真实反馈做决策。不复杂但容易忽略。
