init

语言/Java/大三前/前端智慧之书.md

@@ -0,0 +1,130 @@
+# 5.21
+
+<img src="F:\记录\Java\image-20250521172948347.png" alt="image-20250521172948347" style="zoom:33%;" />
+
+## 在引入组件之后 发现挤在一起了
+
+### 问题原因
+
+`在import './style.css' 似乎是css冲突 删掉即可`
+
+<img src="F:\记录\Java\image-20250521173028623.png" alt="image-20250521173028623" style="zoom:33%;" />
+
+<img src="F:\记录\Java\image-20250521173102408.png" alt="image-20250521173102408" style="zoom:33%;" />
+
+
+
+
+
+当然可以！以下是你今天遇到的 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`，也可以告诉我！