关于后端设置cookie无效的解决办法

之前项目有一个需求，在下载文件的时候，在向后端发出请求的这段时间要有loading动画提高交互性。

但是当时后端只能以传统的向前端发送流的形式来下载，ajax派不上用场，只能用js去模拟，但是这样就监听不到后端的返回，只能等后端将数据流发送回来，浏览器自动弹出下载提示。

想了想，只能是后端返回的时候发送一个cookie: {downloading: true}，然后我前端轮询这个字段，轮询到就将loading关闭，并将这个cookie删除。理论上来说好像是没什么毛病，但实际应用起来还是有一些坑的。

踩坑完毕，记录一下。

首先遇到的第一个坑就是发现cookie删不掉。

当然，这里说明一下，并不是js或者浏览器本身的机制不允许删除cookie，只是我删除的方式不对。

一开始我只是简单的将cookie设置为空，将expires设置为-1。心里想着，已过期，cookie自动清除，美滋滋，然而事实并没有按照我想的发生。downloading还是躺在cookie里面没有任何变化，是因为没有刷新吗？于是我在后面再次获取了一下：

console.log(document.cookie);

发现cookie里面确实还是有downloading这个字段。

没办法，打开application看看，果然发现了问题，后端传递过来的这个cookie没有设置expires，但是却默认设置了path，再联想我之前删除的cookie是没有带任何参数的，结合cookie的机制，发现了问题所在。

解决办法：

在删除cookie的时候要加上这个字段所带的参数，可能是出于安全的考虑，不同的参数，即使名字相同，也会当成两个cookie存储，所以我删除的并不是后端传过来的cookie，自然就删除不了。

第二个坑，后端设置cookie默认的path属性没有规律。

出于代码复用和性能考虑，后端的很多功能都会集成到一个API，再加上前端可能会用到一些第三方的框架，这些框架所采用过的设计模式都各不相同，都会造成一些不可预测的结果，而项目有可能在任何地方都会有下载的需求，所以当我发现如何删除cookie的时候，我又发现了一个坑，那就是不知道该如何准确获取cookie的path属性。而且如果你请求的接口默认path与你所在的url不匹配的话，浏览器将会忽略这次的cookie设置，在我的项目的直接体现就是，后端响应了cookie，但是我前端接收不到，页面loading无法消失，卡死了。

解决办法：

根据cookie的机制，当cookie的path属性为'/'的时候，cookie就不会被忽略。

所以解决办法就是让后端在set-cookie的时候讲path设置成固定的'/'，以java为例：

Cookie cookie = new Cookie("Downloading","true");
cookie.setPath("/");
response.addCookie(cookie);

然后前端只要在监听到downloading字段的时候，再将path='/'的downloading删除就可以了。