# 5.21
## 在引入组件之后 发现挤在一起了
### 问题原因
`在import './style.css' 似乎是css冲突 删掉即可`
当然可以！以下是你今天遇到的 bug 和完整的排查 + 解决过程总结，我已经帮你整理成一份标准 Markdown 文档，适合放在项目文档或问题记录中使用：
------
# 🐞 前后端分离登录接口跨域问题排查记录（Session / Cookie 登录）
## 📅 日期：2025-05-26
## 👨💻 项目环境
- 前端：Vite + Vue3 + Axios
- 后端：Spring Boot
- 登录机制：后端使用 `HttpSession` 存储用户登录状态，依赖 Cookie 携带 `JSESSIONID`
------
## ❗ 问题描述
前端调用后端 `/user/current` 接口时，即使已经登录，依然返回：
```json
{
"code": 40100,
"data": null,
"message": "未登录",
"description": ""
}
```
在浏览器 DevTools 的 Network 面板中也看到了以下错误：
```text
Access to XMLHttpRequest at 'http://localhost:8080/api/user/current' from origin 'http://localhost:5173'
has been blocked by CORS policy: The value of the 'Access-Control-Allow-Credentials' header in the response is ''
which must be 'true' when the request's credentials mode is 'include'.
```
------
## 🔍 问题分析过程
### ✅ 原因一：未设置 `withCredentials: true`
前端使用 Axios 时，没有携带 Cookie，导致后端无法识别登录态。
```ts
// 修复方式：在 myAxios.ts 中添加以下配置
const myAxios = axios.create({
baseURL: 'http://localhost:8080/api',
withCredentials: true
});
```
------
### ✅ 原因二：后端 CORS 跨域未允许带 Cookie
后端虽然设置了 `@CrossOrigin(origins = {"http://localhost:5173"})`，但**未开启允许携带凭证**，导致浏览器拦截了响应 Cookie。
```java
// 修复方式：加上 allowCredentials = "true"
@CrossOrigin(origins = {"http://localhost:5173"}, allowCredentials = "true")
@RestController
@RequestMapping("/user")
public class UserController {
...
}
```
------
### ✅ 原因三（间接）：没有设置全局 CORS，建议增强处理
为避免今后其他接口忘记设置 `@CrossOrigin`，可以在后端添加全局 CORS 配置：
```java
@Configuration
public class CorsConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOriginPatterns("http://localhost:5173")
.allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
.allowCredentials(true)
.allowedHeaders("*");
}
}
```
------
## ✅ 最终解决方案总结
| 步骤 | 操作 |
| -------------- | ------------------------------------------------------------ |
| ✅ 前端配置 | Axios 添加 `withCredentials: true` |
| ✅ 后端接口注解 | 给所有使用 Session 的接口（如 `/login`、`/current`）添加 `@CrossOrigin(..., allowCredentials = "true")` |
| ✅ 建议增强 | 后端添加全局 `CorsConfig` 类统一处理跨域 |
| ✅ 验证方式 | 登录后检查浏览器 `Application > Cookies` 是否存在 `JSESSIONID`，以及请求头是否携带 Cookie |
------
## 🎉 效果验证
- 登录成功后，后端返回 Set-Cookie
- 浏览器保存了 JSESSIONID
- 请求 `/user/current` 成功返回用户信息
- 所有登录态相关接口恢复正常
------
如果你还需要我帮你生成 PDF / README 格式的文档、或者直接拷贝到项目里 `docs/bug-fix-log.md`，也可以告诉我！