问题起因：

1、关于后端通过session返回的session_id，前端接收Set-Cookie为什么不能自动在浏览器开发者模式下的Application中的Cookie中存储？

2、有多个接口调用时，每个接口的都是独一无二的 Set-Cookie导致了数据不能同屏

3、导致只有在后端接口中设置过 req.session.a = a 的接口默认有返回的Set-Cookie

而每个接口返回的sessoion_id都不同。

导致这样的原因是 前端 和 后端 没有设置 WithCredentials: true

解决：

1、首先要在 前端 axios 配置文件夹中设置 WithCredentials: true

2、后端配置两种方式

方式一

在（我后端使用的是Node）后端 跨域中做同样的配置

1、安装：npm install cors

2、导入：const cors = require('cors');

3、使用cors()中间件：

// 解决跨域问题 (跨域资源共享)
// credentials: true -> 跨域请求是否提供凭据信息(cookie、HTTP认证及客户端[SSL])
app.use(cors({ credentials: true, origin: true }));

方式二

1、前端WithCredentials: true设置了该属性为 true 时，后端需要设置Access-Control-Allow-Origin为前端项目的源地址 （我的项目源地址：http://localhost:5173）

注意：不可设置为 ' * '

错误示范 ❌

res.header("Access-Control-Allow-Origin", "*")`

正确示范✔

res.header("Access-Control-Allow-Origin", "http://localhost:5173")` 

2、此外还需要设置Access-Control-Allow-Creaentials 为 true

res.header('Access-Control-Allow-Creaentials', true)

完整代码：

app.all("*", (req, res, next) => {
    // Access-Control-Allow-Origin必须设置与之匹配的地址，如果设置为 * cookie会失效
  res.header("Access-Control-Allow-Origin", "http://localhost:5173"); 
  res.header("Access-Control-Allow-Credentials", "true"); 
  next();
});

3、在前端 axios 配置中必须和后端的域名一致

例如

后端地址： http://localhost:2022

前端也得使用 localhost 进行配置接口，严格区分 数字 和 字母 127.0.0.1 != localhost

否则还是不能同屏后端传递过来的 set-cookie 例如：

前端

后端

withCredentials 有什么用?

1、简单的理解为，当前请求为跨域类型时是否在请求中协带cookie。

2、在前后端分离的项目中，一般是不需要使用session，所以在前端设置withCredentials时一直都是false

3、导致每次请求后端获取到的session_Id都是新的，无法使用session进行业务操作。

withCredentials : true 是否允许请求携带Cookie

true: 允许

false：不允许

结印 CUMIN