Vue3中请求拦截器不处理跨域，仅负责添加token等请求头；跨域成败取决于后端CORS配置与axios的withCredentials配合，且自定义header需后端Allow-Headers白名单放行。
Vue 3 中请求拦截器本身不处理跨域问题，它只负责在请求发出前添加凭证（如 token、cookie）、设置 headers 或修改 config。跨域是否成功，取决于后端是否允许、浏览器是否放行，而凭证能否携带，关键在于 axios 实例配置 和 后端 CORS 响应头 的配合。
必须开启 withCredentials 才能传 cookie 或认证凭证
若需携带 Cookie、HTTP 认证信息（如 Basic Auth）或某些受保护的凭证字段，axios 实例创建时必须显式启用 withCredentials: true：
- 这是前端唯一能“声明需要发凭证”的方式，不设则浏览器自动忽略 Cookie 等敏感字段
- 即使你在请求拦截器里手动加了
config.headers.Cookie，浏览器也会无视——因为没开withCredentials - 示例配置：
baseURL: '/api',
timeout: 5000,
withCredentials: true // ✅ 关键！
});
注意：withCredentials: true 要求后端响应头中 Access-Control-Allow-Origin 不能为 *，必须指定明确的源（如 http://localhost:5173）。
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
拦截器里加自定义 header（如 token）要配合后端白名单
如果你用拦截器注入的是自定义请求头（比如 Authorization、X-User-Token），那它本身不会触发预检（preflight），但前提是：
- 该 header 是 CORS 安全列表里的（如
Content-Type、Accept）→ 不触发 preflight - 若用了非标准 header（如
token、X-Auth），浏览器会先发 OPTIONS 预检请求 - 此时后端必须在
Access-Control-Allow-Headers中显式列出该字段，否则预检失败，请求被拦
response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Authorization, X-User-Token");
不要在拦截器里伪造或覆盖 Cookie
浏览器自动管理 Cookie（基于 domain/path/secure/httpOnly 规则），你不能也不该在拦截器里手动设置 Cookie 请求头：
- 手动赋值
config.headers.Cookie = 'xxx'会被浏览器忽略（违反同源策略和安全机制） - 正确做法是：确保后端设置了
Set-Cookie响应头 +withCredentials: true+ 后端Access-Control-Allow-Credentials: true - 登录成功后，后端返回的
Set-Cookie会由浏览器自动存储，并在后续带withCredentials的请求中自动带上
常见错误组合与修复方向
- ❌ 前端开了
withCredentials: true，后端Access-Control-Allow-Origin: "*"→ 报错：“The value of the 'Access-Control-Allow-Origin' header must not be the wildcard '*' when the request's credentials mode is 'include'” - ✅ 修复：后端改为指定 origin，或动态反射请求头中的
Origin（需校验白名单） - ❌ 拦截器加了
config.headers.Token = xxx，但接口 401 或 OPTIONS 403 → 后端没在Allow-Headers放行Token - ✅ 修复：后端响应头补上该字段，且大小写需一致（如前端写
Token，后端就不能只写token）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
