又是缓存的锅！

发表于 2018-10-18 更新于 2024-09-22 分类于有趣的Bug

最近在忙于重写自己的博客，springboot+vue，前后端分离，虽然还有完成，但也一定要记下这个坑。

由于文章、标签、分类等业务逻辑并无巨大改动，无非是改改接口名称，规范化url地址。但重写打算增加一些与文件相关的接口，例如修改、删除、重命名等。前台与后台在本地测试都无问题，于是打算将后台打包放在服务器上再进行测试。

问题就发生在了这里，不知什么时候开始，前端查询文件列表的时候，竟然发生了跨域请求错误，但后台拦截器中已经在header中设置好了允许跨域，而且其余的接口都没出现问题，这点让人很困惑，而且后台放在服务器上才会出现这个问题，本地啥事没有。

开始查找是否是后台的问题，虽然可能性不大，但还是仔细看了一遍，实在找不到什么问题。

接着在chrome中看下这个请求的具体信息，发现响应头中有

1
2
3

Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept
Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE

但没有

1	Access-Control-Allow-Origin: http://localhost:9528

其余没发生错误的请求都是有Origin这个东西的。
在后台的过滤器中，是这样写的

httpResponse.setHeader("Access-Control-Allow-Headers","Origin, X-Requested-With, Content-Type, Accept");
httpResponse.setHeader("Access-Control-Allow-Credentials", "true");
httpResponse.setHeader("Access-Control-Allow-Methods", "GET, POST, OPTIONS, PUT, DELETE");
httpResponse.addHeader("Access-Control-Allow-Origin", reqs.getHeader("Origin"));

为什么会上面三个都能添加成功，而Origin就没有？是因为getHeader方法取了null？于是开始打印输出getHeader取到的值，本地测试毫无问题，于是打包仍在服务器上，惊奇地发现没有输出任何信息…这是怎么回事，后台都没进去？

此时开始怀疑缓存的问题…

另外一个bug也是由缓存的原因。在删除文件后，再次刷新，会发现刚刚删除的文件，又回来了。然后服务器中查看的确是已经删除了。不断的点击刷新按钮，毫无效果。但本地测试是没有任何问题的，这该死的服务器。

之间还使用了另外一种方法，使用swagger文档中的try it out ，发现拿到的数据也不对，但我在直接在浏览器访问接口地址就可以拿到正确的数据。此时还注意到一个细节，用swagger时返回数据非常快，肉眼不可见的那种…再回想下不停的点击刷新按钮，也是看不见进度条在加载，本地测试的时候，进度条好歹也会转个半秒再消失。此刻更加怀疑缓存的锅。

此刻才开始搜索 “vue axios 缓存” 关键字，的确看到了我想要的答案

打开谷歌的调试工具，在NetWork中找到了请求，发现Size属性都是 (from disk cache) ，解决办法是在请求中添加一个随机参数。

根据时间添加一个请求参数后，就不会从缓存中取数据了

困扰我一个晚上的两个bug也因此而解决，吃一堑长一智，心情只能用一个字来形容：舒坦！