解决前端登录成功之后,往后端发请求携带cookie问题

项目背景:

今天在做伙伴匹配系统:

我现在实现的功能是:

在我登录成功之后,就进入了主页(默认页),在我访问用户页的时候产生的问题

首先说明一下这个Cookie的问题:

我们登录成功之后,服务器会生成一个用来标识用户身份的会话标识符,也就是通常所说的"Cookie"。这个 Cookie 会被存储在用户的浏览器中,并在之后的请求中被发送到服务器,以便服务器能够识别用户的身份。

这个就好比与我们去住酒店的房卡一样

当用户成功登录后,服务器会在响应中包含一个用于标识用户身份的 Cookie,并设置其有效期。这个 Cookie 通常会包含一些加密信息或标识符,以便服务器在后续的请求中能够识别用户身份,并提供相应的权限或内容。

所以,用户登录成功后产生的 Cookie 是存储在用户浏览器中的,并在用户与服务器之间的通信中起着重要的作用。这也是为什么在跨域请求时需要特别注意 Cookie 的传递,确保正确地维护用户的登录状态。

说回这个Cookie在项目中的作用,当我们成功登录之后,浏览器产生了这个Cookie,如果我们想访问其它页面的话,就需要携带这个Cookie,要不然后端是不认识你的。

我在后端写了一个接口:获取当前用户,怎么获取的呢?就是通过这个前端传来的Cookie,判断你是否已经登录和你是否是普通用户还是管理员。

下面说我碰到的问题:

我在前端登录成功之后,我无法将这个Cookie带给后端

我们可以看到:在这个请求标头中是没有cookie的信息的。

我们需要在Axious的配置中添加:

复制代码
myAxios.defaults.withCredentials = true;

这段代码的作用就是可以让前端携带Cookie。

在yml的配置文件中:配置 domain:localhost

作用就是设置cookie允许在哪个域名下可携带。

我们在请求标头中也能看到。

然后说一下我自己的问题:

我一开始的访问:

仔细观察就会发现:我自己之前访问的是:http://127.0.0.1:5173/user/login 这个域名

请求标头中就不携带Cookie

不过我访问:http://localhost:5173/#/user

就携带

原因:

使用127.0.0.1和localhost都指向本地主机,但在浏览器的Cookie策略中,它们被视为不同的域。因此,虽然两者都指向同一台主机,但Cookie在这两种情况下的处理方式可能会有所不同。

在处理Cookie时,浏览器基于"同源策略"(Same-Origin Policy)来确定哪些网站可以访问哪些Cookie。网站之间共享Cookie需要满足以下条件之一:

  1. 相同的域名
  2. 相同的子域和顶级域
  3. 使用IP地址访问时,IP地址必须完全相同

因此,使用127.0.0.1和localhost是不同的域(或主机),即使它们指向同一台主机,但浏览器仍将其视为不同的来源。

总结一下就是:我一直把我的cookie种在了http://localhost:8080/api这个域,不过http://localhost:8080/api和 http://127.0.0.1:5173/并不是一个域,所以,我在访问 http://127.0.0.1:5173/这个域名的时候,我就一直找不到cookie 。

相关推荐
子兮曰4 天前
jev-ultrafast 深度解析:7 秒订机票的浏览器 Agent 是如何炼成的
前端·后端·agent
子兮曰4 天前
Jev 爆发一周:7 秒 Agent 背后的 System One 生态与三场争议
前端·后端·ai编程
前端小万4 天前
写公众号赚了 3000 块后,我做了一款叫 "一键成稿" 的软件
前端·微信小程序
爱勇宝4 天前
ZCode 开源 24 小时:一份没有历史的账本,回答不了"有没有偷代码"
前端·后端·chatglm (智谱)
三十而立洋4 天前
Cookie 详解:从产生到安全,一次讲透
前端·javascript
卡布鲁4 天前
把一个 Vite + Vue3 应用塞进 qiankun (React + Umi3) 主站:十个坑的复盘
前端·javascript·react.js
汉堡大王95274 天前
Jev:不是聊天机器人, 而是一个智能 if 语句
前端·人工智能·后端
梦想很大很大4 天前
从运行事实到回归证据:Workrun 的 Telemetry 与 Evaluation 实践
前端·人工智能·后端
计算机魔术师4 天前
Meta Muse agent 接入 Shopify 的 Shop Pay 实现代理式购物
前端
沙蒿同学4 天前
我用 Go 搭了一条 AI Agent 流水线:从 1 张商品图到一整套淘宝详情页
前端·javascript·后端