＜img＞标签src缓存问题

最新推荐文章于 2023-09-22 15:57:05 发布

唯空城

最新推荐文章于 2023-09-22 15:57:05 发布

阅读量1.8k

点赞数 1

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_37634156/article/details/119059669

版权

vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文讲述了在开发项目时遇到的登录验证码验证失败的问题。问题源于前端使用<img>标签加载验证码，当请求路径不变时，浏览器会从缓存中获取图片，导致刷新验证码实际上并未重新请求后端接口，进而使得输入的验证码与session中存储的验证码不符，登录失败。解决方案是通过生成不重复的随机数或使用时间戳确保每次请求的src不同，从而避免缓存影响，成功解决登录验证问题。

摘要由CSDN通过智能技术生成

最近做项目，登录实现验证码时，总是会出现验证码检验失败，起初以为是输入的时候偶尔输错了也没有在意，后来发现经常出现输入五六次验证码都登录失败，在领导的强烈投诉下，决定好好检查下...

前端代码如下

<Col span="10" style="height: 38px;">
    <img :src="codeImg" @click="refreshImage" height="38" width="112" style="cursor: pointer;"/>
</Col>


data () {
    return {
        codeImg: '/randCodeImage'
        ...
    }
}

methods: {
    refreshImage () {
        let num = Math.ceil(Math.random() * 10) // 生成一个随机数（防止缓存）
        this.codeImg = '/randCodeImage?' + num
        this.form.identifyCode = '' //输入验证码框
    }
}

检查

其中src指向后端的接口；通过打印num的值，我发现当num出现重复的时候就不会往后台接口跳转。于是我好像发现了什么不得了的事情....

解决

通过了解浏览器的缓存知识发现：

<img>标签的src中请求路径如果不变的话，浏览器会认为是同一张图片，不会重新发送请求，转而从缓存中读取验证码，虽然也实现了验证码的刷新，但是代码中登录验证的逻辑是生成验证后存入session中，登录方法中把输入的验证码与缓存中的验证码进行对比判断，由于缓存，刷新的验证码没有走后台生成，在session中找不到对应的验证码所以出现登录验证码验证失败。

所以将refreshImage方法改造一下，将生成一个随机数改为生成一个不重复的随机数，保持img的src始终不同，或者把随机数改成时间戳，问题迎刃而解。