关于fidders抓包显示sessionOut=true的问题-页面缓存问题

DTcode7

已于 2023-10-16 19:56:19 修改

阅读量982

点赞数 1

分类专栏： # 前端基础入门三大核心之JS 前端开发技巧与习惯文章标签：缓存

于 2021-11-16 09:50:39 首次发布

本文链接：https://blog.csdn.net/black_cat7/article/details/121349003

版权

前端基础入门三大核心之JS 同时被 2 个专栏收录

109 篇文章 10 订阅

订阅专栏

前端开发技巧与习惯

34 篇文章 7 订阅

订阅专栏

游览器为了节约资源，是会缓存页面的，但这也会带来一个问题，那就是因为缓存了页面，你再次打开页面它不会发送请求（游览器觉得页面没有变化），导致你页面是打开了，但是你的登录状态出现了问题（因为没有发送登录请求，你的登录状态没有更新），也就是为什么fidders抓包，会显示sessionOut=true =====> 登录状态过期/未登录

网上有很多处理页面缓存的方法，比如：

1.打包的时候把html打包成jsp，然后添加一些东西

2.在meta里添加一些东西防止缓存

3.给请求添加时间戳等等；

踩坑记录：

先说结论，我的项目，给请求添加【时间戳】，是没有用的，仍然会出现sessionOut的情况，请求发不出去；

所以我采用了再meta里添加一些东西 + 将html打包成jsp 的结合方法，来处理这个问题

将html打包成jsp尾缀文件，可防止页面缓存（亲测有效）

第一步：查看这篇博客，有思路和说明

(1条消息) vue cli 直接打包成 index.jsp 文件_ruisenLi的博客-CSDN博客https://blog.csdn.net/ruisenLi/article/details/121075443 我按照这篇博客来进行打包，结果确实得到了打包后的jsp文件

但是，当我实际部署了这个静态页面后，打开页面，会提示【错误码500】，这就是上面这篇博客里提到，但是没有说明确的地方，

我对这里进行一下补充说明：

因为使用jsp格式，同时，打包时还使用的是 raw-loader 插件解析jsp，会导致后端无法解析 <%= 这种东西，如果还有，那么后端就会返回500错误码，所以，需要将模板文件中的所有 <%= 给删掉，不然

第二步：其他的按照这篇博客来打包就ok了。

第三步：你会发现部署后的静态文件，中文乱码

这是因为打包后的首页（这里打包成了jsp尾缀的文件，一般打包是index.html），需要加上jsp标识，这样才不会中文乱码

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" contentType="text/html;

这是我打包后的jsp首页：注意第一行（jsp标识，解决打包后页面中文乱）

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <meta http-equiv="Cache-control" content="no-store, must-revalidate">
<!-- 防止缓存 -->
  <meta http-equiv="Expires" content="-1">
  <meta http-equiv="Cache" content="no-store">
  <meta http-equiv="Pragma" content="no-store">
  <meta name="renderer" content="webkit">
  <title></title>
  <link href="css/chunk-vendors.62e4da29.css" rel="preload" as="style">
  <link href="css/xxx.179117ef.css" rel="preload" as="style">
  <link href="js/chunk-vendors.363e9f0d.js" rel="preload" as="script">
  <link href="js/xxx.af92b656.js" rel="preload" as="script">
  <link href="css/chunk-vendors.62e4da29.css" rel="stylesheet">
  <link href="css/xxx.179117ef.css" rel="stylesheet">
</head>

<body><noscript><strong>暂不支持该浏览器，请使用chrome等浏览器访问</strong></noscript>
  <div id="app"></div>
  <script src="js/chunk-vendors.363e9f0d.js"></script>
  <script src="js/xxx.af92b656.js"></script>
</body>

</html>

需要在打包后的首页的【首行】，加上这行代码，就能解决部署后的静态页面中文乱码问题

你可以在打包后手动打开页面粘贴上这行，也可以在public/index.html这个模板文件的首行先加上这行，这样，打包完就会自动自动有这行，不用手动去粘贴~

注意：模板文件中，要删掉我上面说的 <%= 内容，这样打包后的页面才不会报错！

给请求添加时间戳的方法：（无法处理页面被缓存问题）

我封装的请求api中，通过axios拦截器，针对get、post进行参数的拦截处理，分别针对params和data中的参数添加上【 _t:1564156 】这样的时间戳，确保每个请求都是差异的，虽然用来处理页面缓存而不发送请求的问题，但是能让每个请求的独一的，可能某天就能用上呢？记录一下~

具体代码如下：

//请求拦截器，在请求发送前，进行参数的处理，添加时间戳
axios.interceptors.request.use(config => {
  if (config.method === 'get') {
    // 缓存问题，get请求添加时间戳
    //通过扩展运算符号，列出本身传入的params参数，然后再添加一个_t时间戳参数
    config.params = {
      ...config.params,
      _t: Date.parse(new Date()) / 1000
    }
  } else if (config.method === 'post') {  //当前请求时post时
     //同理，展开本身传入的data参数，再添加时间戳参数
    const obj = { 
        ...config.data,
         _t: Date.parse(new Date()) / 1000 
    }
    config.data=obj
  }
})

这样，当你发送请求的时候，就会在参数里带上一个 _t 的时间戳参数，表示每个请求都是不同的