2020-10-21

Vue项目中关于请求携带Cookie的问题

前端小白，记录一下工作中遇到的一些问题，最近自己鼓捣了一个vue后台项目(用node起了个后端)，在做接口联调的时候发现关于cookie的一些问题，大家都知道在开发vue项目的时候，前后端接口联调会出现跨域的情况，当然这个问题前后端都可以进行处理，自己搭建的项目是前端项目解决的跨域，最近写的公司项目是由后端同学解决的跨域。两种不同的处理方式，使得在接口请求过程中自己鼓捣的项目携带cookie，然而公司项目请求却不携带cookie，项目登录都是用token来做的，两个项目后端都没有用到cookie，每次接口请求中没必要携带cookie。

为了搞清楚这一问题的原因，脑袋瓜子都被搞的嗡嗡响。
首先我们要搞清楚cookie在http请求中被携带满足的条件是什么：
1、本地已经缓存的有cookie。
2、根据请求的URL匹配cookie的domain和path属性，如果都符合才会被携带到请求头中。
(举个栗子，https://www.baidu.com就不能发送https://blog.csdn.net的cookie)。

搞清楚cookie被携带的条件，问题自然迎刃而解了。公司项目由于后端处理的跨域，请求接口的时候协议和域名不一致，跨域的时候浏览器默认是不会携带cookie的。自己搭建的项目由于前端代理使用了proxy进行代理，代理的地址就是我们请求的接口。proxy处理跨域是利用了服务器是不存在同源策略的限制这个原理来解决跨域问题的，这样就相当于本地请求是使用服务器地址请求的，所以在请求头中就会携带cookie。到此理解了两种处理跨域方式使得请求头中cookie是否携带的原因。

接下来，那如果是后端处理跨域我们想在请求中携带cookie应该怎么做呢，首先后端接口要在跨域配置中允许浏览器携带cookie，如果不允许携带而前端配置了发送cookie，那么请求头中将会出现( Provisional headers are shown )

axios默认是不携带cookie的需要我们在二次封装axios的时候进行配置。

// axios配置允许携带cookie
axios.defaults.withCredentials = true

扩展：

会话cookie(内存cookie)和持久cookie(硬盘cookie)的区别

如果不设置过期时间，则表示这个cookie生命周期为浏览器会话期间，只要关闭浏览器窗口，cookie就消失了。这种生命期为浏览会话期的cookie被称为会话cookie。会话cookie一般不保存在硬盘上而是保存在内存里。
如果设置了过期时间，浏览器就会把cookie保存到硬盘上，关闭后再次打开浏览器，这些cookie依然有效直到超过设定的过期时间。
存储在硬盘上的cookie可以在不同的浏览器进程间共享，比如两个IE窗口。而对于保存在内存的cookie，不同的浏览器有不同的处理方式。