验证码图片点击无反应，根本原因是浏览器缓存导致URL未变更，必须在请求路径后拼接唯一时间戳参数（如?timestamp=1721126880123）强制刷新；同时需确保DOM加载完成后再绑定事件、响应头含正确Content-Type且状态码为200。
验证码图片点击刷新没反应，大概率是缓存没破
浏览器把 /getImageCode 当成静态资源缓存了，哪怕你反复给 src 赋相同值，它也不会发新请求。这不是 JS 错误，是 HTTP 缓存机制在起作用。
- 必须在 URL 后拼唯一参数，最常用的是时间戳：
/getImageCode?timestamp=1721126880123 - 别用
Math.random()——某些代理或 CDN 会截断小数点后部分，导致重复 - 确保每次点击都生成新值，不能只在页面加载时算一次
- 如果后端支持，也可加
Cache-Control: no-cache响应头，但前端加参数更可靠
img 标签绑定 click 事件失败，先看父容器是否可交互
<img> 本身没有默认点击行为，事件得靠 JS 绑定。但常见错误是绑在了错误目标上：
- 直接写
<img onclick="...">—— 不推荐，依赖全局函数且难调试 - 用
document.getElementById('imgVcode').addEventListener('click', ...)—— 如果 DOM 没加载完就执行，返回null，监听器根本没挂上 - 正确做法是监听父容器（如
<div id="imgDiv">），它更稳定，且能捕获冒泡事件 - 确认父容器没设
pointer-events: none，否则整个区域都点不动
后端接口返回 304 或 200 但图片不更新，检查响应头和 MIME 类型
即使 URL 带了时间戳，如果后端没正确响应，前端仍可能复用旧缓存或渲染失败：
- 响应状态码不是
200（比如304 Not Modified）→ 检查后端是否误判了 ETag/Last-Modified - 响应头缺失
Content-Type: image/png（或对应类型）→ 浏览器可能拒识为图片，<img>显示空白或 broken 图标 - 后端返回了 HTML 内容（比如登录跳转页）却伪装成图片 → 打开 DevTools 的 Network 面板，点开该请求，看 Preview 是否真是一张图
- 跨域场景下，若后端没配
Access-Control-Allow-Origin，控制台会报 CORS 错误，但图片可能静默失败
表单内验证码按钮点不动？警惕 type 属性和默认行为冲突
如果验证码 <img> 在 <form> 里，且旁边有 <button>，容易误触表单提交：
立即学习“前端免费学习笔记（深入）”；
- 按钮没写
type="button"→ 默认是type="submit"，一点击就触发表单提交，页面刷新，JS 中断 - 没调
event.preventDefault()→ 即使绑了 click，提交行为仍会执行 - 验证码刷新逻辑写在
submit事件里？错——那是提交前校验时机，不是点击图片的时机 - 验证逻辑应独立于表单：图片点击只负责换图，校验留在提交时做（比如比对输入值 + 后端 session key）
