采坑: 前后端分离 Cookie

Posted 2023-02-22

参考技术A 这几天做了一个在线便签的小项目, 使用了前后端分离的方式

当用户主动退出, 刷新页面后, 用户又自动登录上, 说明 cookie 并没有删除. 查看浏览器中的 cookie, 发现在application -> localhost:3000 下并没有 cookie. 但在每次发起的请求头中, 是能看到 cookie 信息的

我曾经一直以为只要服务器设置了 cookie, 浏览器就是能够看到的. 但实际上 cookie 是与域名有关. 假设浏览器访问过A, B, C 当个域名, 每个服务器传回一个 cookie, 则在浏览器中记录了三个域名下的 cookie 信息. 但是在 application 下只能看到当前域名下的 cookie, 比如当前正访问 A 站, 则只能看到 A 站的 cookie, 访问 B 站时, 则显示的是 B 站的 cookie. 总之一句话, 肉眼看不到 cookie, 并不代表 cookie 没有存储在浏览器中.

在这个项目中, 由于后端是运行在 heroku 域名下, 所以发回的 cookie 对应的是 heroku 域名, 而不是 localhost:3000, localhost:3000 本身也并没有设置 cookie 响应头. 这也就是为什么当我访问 localhost:3000时, 浏览器中看不到相应的cookie, 而实际上 userid 这个 cookie 是存在, 只有在我访问 heroku 域名时, 才肉眼可见.

根据上述原因, 那么我就需要再用户主动 logout 时, 删除 heroku 域名下 userid 这个 cookie 才可以.

首次尝试的方法, 就是用 document.cookie 获取浏览器中存储的所有cookie, 找到 key=userid 并删除. 然后该方法并不奏效, 这又是为什么呢?

因为我当前访问的是 localhost:3000, document.cookie 实际获取的是当前域名下对应的所有cookie, 因为 localhost:3000并没有设置 cookie 响应头, 所以 document.cookie 返回的是空值. 想想也很自然, 如过任何一个前端网站, 都可以通过 document.cookie 获取到其他域名的 cookie, 那世界岂不乱套了!

所以唯一的解决办法就是, 当用户 logout 时, 向 herohu 域名发起 logout 请求, 后端收到请求后, 设置响应头

意在告诉浏览器, 请把' 我( heroku域名)' 发给'你(浏览器)'的 userid 这个 cookie 的有效期设置为过去的某个时间. 当浏览器接收到响应头后, userid 这个 cookie 就失效了, 刷新页面后就不会再自动登录了.