记一次前后端关于Cookie调试的问题

记一次前后端关于Cookie调试的问题

---

背景

前端web页面在刷新页面之后，无法再从Cookie中获取的token信息，进而导致后续跟用户权限和操作相关的接口前端都会调用失败。

---

问题定位

1. 前端

最开始主要是在测试时偶然的刷新了web页面，接口各种调用失败，可以很明显的从浏览器调试工具的Network里面的请求中少了token的参数，而且在刷新页面后必然复现，于是直接在自己负责的接口当中添加了通过Cookie获取token的参数(虽然这就是最正确的方式，但是在最开始并没有在意)，部分接口的问题解决，但是其他接口仍然有问题。

2. 后端

之后猜测是否是因为容器的问题，虽然本地运行正常。抱着试一试的态度，将前端项目由jetty启动改为由tomcat启动，问题并没有解决，于是陷入僵局，于是问题回到前端为什么无法操作Cookie。

---

解决

顺着刚刚的线索在百度了一番(程序员为什么一定要用google，手动doge)，找到了httpOnly这个配置，这个配置的描述翻译过来就是当设置为httpOnly后，Cookie的内容会对客户端的脚本隐藏，而浏览器可以随意的操作，删除修改保存。于是在源码中写入Cookie的类中发现了setHttpOnly这个flag的配置。

然后仔细找了找httpOnly这个标识的位置，主要是为了安全，因为Cookie最开始是由客户端自己生成，所以会包含用户自己本地的部分信息，但是现在大部分token或者sessionId有服务器来管理，对token泄漏的风险因服务器的各类验证策略的加强而不再那么严重。

---

总结

前端js操作由于其特性，所以很多情况下其实还是由后端占主导地位，所以当前端无法进行部分操作时，应该从后端返回的报文中看看是不是因为不合理的配置或者标识导致的。

延伸

期间查询了vue项目的启动方式，vue开发主要配合node.js使用，虽然也可以直接使用node.js运行项目可能会有一些安全风险，如项目的权限是node.js的启动权限，可能会被渗透攻击，js脚本会直接暴露给用户，会暴露系统缺陷；第二就是部署上的问题，需要将源码直接放到服务器上，可以在服务器中直接修改，会因为认为原因导致服务器上的版本和发布版本不一样。

tomcat和jetty启动vue项目的方式：

先使用node.js的build进行编译，进入项目目录后执行命令npm run-scripts build，编译结束后会在目录中生成一个dist目录，将dist目录中的内容全都转移到tomcat的webapps中的新建目录下也可以直接将dist目录直接复制过去，启动tomcat或者jetty后，直接通过host:port/就可以访问自己的vue工程了。

当vue启动空白页问题：

1.config下index.js中的assetsPublicPath从'/'改为'./'

2.工程目录下index.xml文件中script标签中的src属性从绝对路径改为相对路径：